jetpack compose 之 TextField 文本输入框

基本使用

TextField用来显示一个输入框，它是Material Design库提供的，具有Material Design风格：

TextField(
    value = "",
    onValueChange = {

    }
)

创建TextField有两个必传的参数，value输入框默认值，onValueChage输入框文本改变事件，在文本改变时，会回调这个方法；
此时创建的TextField运行后你会发现输入内容只会回调onValueChage这个方法，TextField上没有任何变化，这是因为在Jetpack Compose中，TextField 不会自行更新，但会在其 value​参数更改时更新:

//创建MutableState<T>对象
var textValue by remember { mutableStateOf("") }
TextField(
    value = textValue,
    onValueChange = { textValue = it }
)

mutableStateOf("")可以创建一个可观察MutableState<T>对象， MutableState是Compose 运行时集成的可观察类型。当MutableState的值变化的时候，Compose会重组所有使用到这个值的View
remember 可以在View重组后保持状态，就是可以保存你的值，如果没有这个，你每次输入textValue的值都会替换成你当前输入值，所以Compose规定在composable函数中，声明MutableState<T>必须添加remember

textStyle

textStyle参数可以设置TextField的文字的样式，比如颜色，大小等：

var textValue by remember { mutableStateOf("") }
TextField(
    value = textValue,
    onValueChange = { textValue = it },
    textStyle = TextStyle(fontSize = 16.sp,color = Color.Red)
)

lable

lable参数可以设置TextField的 lable，它接收的是一个视图函数，这意味着我们可以添加任意的View为TextField的lable：
添加Text

TextField(
    value = textValue,
    onValueChange = { textValue = it },
    label = { Text("Name") }
)

添加Icon

TextField(
    value = textValue,
    onValueChange = { textValue = it },
    label = { Icon(imageVector = Icons.Filled.Add, contentDescription = "") }
)

placeholder

placeholder参数可以设置文字为空时的提示，类似xml布局中EditText的hint：

TextField(
    value = textValue,
    onValueChange = { textValue = it },
    label = { Text("名称") },
    placeholder = { Text(text = "请输入名称") }
)

同样它接收的是一个视图函数，我们可以自由的添加各种view

visualTransformation

visualTransformation可以设置文字效果，可以实现输入密码等效果：

TextField(
    value = textValue,
    onValueChange = { textValue = it },
    label = { Text("名称") },
    placeholder = { Text(text = "请输入名称") },
    visualTransformation = PasswordVisualTransformation(),
)

keyboardOptions

keyboardOptions参数可以设置TextField的键盘类型，比如密码，数字等：

TextField(
    value = textValue,
    onValueChange = { textValue = it },
    label = { Text("名称") },
    placeholder = { Text(text = "请输入名称") },
    visualTransformation = PasswordVisualTransformation(),
    //设置只能输入数字 imeAction 可以设置键盘按钮类型，这里设置为搜索
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number,imeAction = ImeAction.Search)
)

Compose给我们内置了几种KeyboardType，详情可以查看KeyboardType类

所有属性

@Composable
fun TextField(
    // 输入框内容
    value: String,
    // 内容更改回调
    onValueChange: (String) -> Unit,
    // 基础样式
    modifier: Modifier = Modifier,
    // 是否可编辑和聚焦
    enabled: Boolean = true,
    // 是否只读，只读状态下，不能编辑，但是可以聚焦复制内容
    readOnly: Boolean = false,
    // 文字样式
    textStyle: TextStyle = LocalTextStyle.current,
    // Material风格的Label
    label: @Composable (() -> Unit)? = null,
    // 文字为空时占位内容
    placeholder: @Composable (() -> Unit)? = null,
    // 文字前的图标
    leadingIcon: @Composable (() -> Unit)? = null,
    // 文字后的图标
    trailingIcon: @Composable (() -> Unit)? = null,
    // 当前是否是错误状态
    isError: Boolean = false,
    // 文字效果应用，可实现输入密码等效果
    visualTransformation: VisualTransformation = VisualTransformation.None,
    // 键盘类型,还可以设置键盘按钮的类型
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    // 键盘按键事件
    keyboardActions: KeyboardActions = KeyboardActions(),
    // 是否单行
    singleLine: Boolean = false,
    // 最大行
    maxLines: Int = Int.MAX_VALUE,
    // 监听组件交互变化,拖动，按下等
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 输入框形状，圆角等
    shape: Shape =
        MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize),
    // 输入框各种颜色
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
)

OutlinedTextField

OutlinedTextField是Material Design库提供的带边框的输入框，它的基本属性和TextField一样；

BasicTextField

BasicTextField是Compose提供的最基础的文本输入框，它没有任何样式，我们自己可以任意修改它的样式，它的数据基本和TextField一样，除了一些Material Design一些特有的属性如：lable等没有，其他的和TextField一致。
除非我们的应用是Material Design风格的，不然我们一般都使用BasicTextField。