参考地址：developer.android.google.cn/jetpack/com…

Compose中TextField允许用户输入和修改文字，而它分为2个级别分别是TextField和BasicTextField

TextField默认样式是填充 跟我正常使用的EditText一个样子，OutlinedTextField 轮廓式样式类似于我们使用Shape 添加外轮廓线样式的背景。

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

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

remeber会报红，直接import就行。

OutlinedTextField 然后发现报红，问题出现在label=后面应该使用大括号将表达式包裹起来

原因：看下源码就知道了。这种错误估计也只可能我犯，大佬们请略过。

fun OutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    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.Default,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small,
    colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
) 

通常来讲我们使用TextField和OutlineTextField

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

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("填充式输入框？") },
        modifier = Modifier.padding(20.dp)
    )
}

@Composable
fun SimpleOutlineTextFieldSample() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("外轮廓输入框") },
        modifier = Modifier.padding(20.dp)
    )
}

如果需要首尾trim 则可以使用trimStart和trimEnd

@Composable
fun NoleadingZeroes() {
    var input by rememberSaveable {
        mutableStateOf(
            ""
        )
    }
    TextField(
        value = input, onValueChange = { newText ->
            //起始 0替换成"" 和结束 1 替换为""
            input = newText.trimStart { it == '0' }
            input = input.trimEnd { it == '1' }
        },
        modifier = Modifier.padding(20.dp)
    )
}

我们还可以设置keyboardOptions限制输入的类型如 KeyboardType.Email输入邮箱等等，KeyboardActions是软键盘点击imeAction的回调如：搜索，下一步，完成等等

@Composable
fun TextFiledKeyboardOption() {
    val text = remember {
        mutableStateOf("")
    }
    val context = LocalContext.current
    TextField(
        value = text.value,
        onValueChange = {
            text.value = it
        },
        label = { Text("请输入email") },
        keyboardOptions = KeyboardOptions(
            //Characters 全部大写  Words 单词首字母大写 Sentences句子首字母大写
            capitalization = KeyboardCapitalization.Words,
            //自动修正
            autoCorrect = true,
            //输入类型为email
            keyboardType = KeyboardType.Email,
            // 软键盘回车键对应的按键选项
            imeAction = ImeAction.Next
        ),
        //imeAction 的监听事件 如：点击搜索，下一步，完成等等!
        keyboardActions = KeyboardActions(onSearch = {
            Toast.makeText(context, "点击了搜索", Toast.LENGTH_SHORT).show()
        }, onNext = {
            Toast.makeText(context, "点击了下一步", Toast.LENGTH_SHORT).show()
        }),
        textStyle = TextStyle(color = Color.Black, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}