Compose 中 文本输入（TextField）

在 Jetpack Compose 中，TextField 是用于接受用户输入的文本字段组件。它允许用户在应用程序中输入文本，并通过监听文本内容的变化来执行相应的操作。TextField 组件提供了许多参数，以便于你自定义文本字段的外观和行为。

基本用法

以下是一个简单的示例，演示了如何在 Jetpack Compose 中使用 TextField 组件：

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun TextFieldExample() {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { newText -> text = newText },
        label = { Text("Enter text") },
        placeholder = { Text("Placeholder") },
        modifier = Modifier.fillMaxWidth()
    )
}

@Preview
@Composable
fun TextFieldExamplePreview() {
    TextFieldExample()
}

参数解释

• value: 当前文本字段的值，通常是一个可变状态（mutableStateOf）变量。
• onValueChange: 用于监听文本字段值的变化，并更新状态变量的回调函数。
• label: 用作文本字段的标签，显示在文本字段上方。
• placeholder: 用作文本字段的占位符，在文本字段为空时显示。
• modifier: 用于设置文本字段的修饰符，例如填充整个宽度。

高级用法

TextField 组件还提供了一系列的参数，以支持更多高级的用法，如设置输入类型、限制字符数、定义键盘行为等。下面是一个具有更多自定义选项的示例：

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun AdvancedTextFieldExample() {
    var text by remember { mutableStateOf(TextFieldValue()) }

    TextField(
        value = text,
        onValueChange = { newText -> text = newText },
        label = { Text("Enter text") },
        placeholder = { Text("Placeholder") },
        modifier = Modifier.fillMaxWidth(),
        keyboardType = KeyboardType.Text,
        maxLines = 1,
        singleLine = true,
        leadingIcon = { Icon(Icons.Filled.Search, contentDescription = "Search") },
        trailingIcon = { Icon(Icons.Filled.Clear, contentDescription = "Clear", onClick = { text = TextFieldValue() }) }
    )
}

@Preview
@Composable
fun AdvancedTextFieldExamplePreview() {
    AdvancedTextFieldExample()
}

解释

• keyboardType: 指定键盘类型，例如文本、数字、电子邮件等。
• maxLines: 指定文本字段的最大行数。
• singleLine: 指定是否将文本字段限制为单行。
• leadingIcon: 在文本字段前面添加一个图标。
• trailingIcon: 在文本字段后面添加一个图标，并设置点击事件。

通过以上示例和解释，你可以在 Jetpack Compose 中使用 TextField 组件创建用户输入的文本字段，并根据需要进行各种自定义设置。