一、概念

二、输入框 TextField

var str by remember{ mutableStateOf("123456") }
TextField(
    value = str,    //文本内容
    onValueChange = { str = it },    //内容变化后的回调，it是新的内容
    modifier = Modifier,
    enabled = true, //是否启用
    readOnly =  false,  //只读的话，不可编辑可复制，点击获取焦点不会弹键盘
    textStyle = LocalTextStyle.current, //设置文本样式
    label = { Text(text = "标签文本") },    //显示在输入框边框上的提示文本
    placeholder = { Text(text = "提示文本") },  //内容为空时的提示文本
    leadingIcon = { Icon(imageVector = Icons.Default.Home, contentDescription = null) }, //左边图标
    trailingIcon = { Icon(imageVector = Icons.Default.Star, contentDescription = null) }, //右边图标
    prefix: @Composable (() -> Unit)? = null,    //前缀
    suffix: @Composable (() -> Unit)? = null,    //后缀
    supportingText = { Text(text = "输入框下面显示的文本") },
    isError = false,
    visualTransformation = VisualTransformation.None,    //内容可见性，不可见是PasswordVisualTransformation()
    singleLine = false,  //单行（设为true会忽略maxLines）
    maxLines = 5,   //最大行数
    minLines: Int = 1,    //最小行
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,    //键盘选项
    keyboardActions: KeyboardActions = KeyboardActions.Default,    //键盘监听
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },    //状态监听
    shape = TextFieldDefaults.filledShape,    //背景形状
    colors = TextFieldDefaults.textFieldColors()    //设置颜色
)

2.1 字体大小 textStyle

textStyle = TextStyle.Default.copy(fontSize = 20.sp)

2.2 颜色设置 color

大多数都有四种状态：选中focused、未选中unfocused、不可用disabled、错误error。

colors = TextFieldDefaults.colors(
    //输入的文字颜色
    focusedTextColor = Color.black,
    unfocusedTextColor = Color.gray,
    disabledTextColor = Color.gray，
    errorTextColor = Color.red,
    //光标
    cursorColor = Color.black,
    errorCursorColor = Color.red,
)

2.3 键盘选项 keyboardOptions

keyboardOptions = KeyboardOptions(
    keyboardType = KeyboardType.Text,    //输入类型
    imeAction = ImeAction.Next,    //键盘类型
    autoCorrect = true,    //自动更正（保持默认就行）
    capitalization = KeyboardCapitalization.Sentences    //字母大写
)

2.4 键盘监听 keyboardActions

监听点击了哪种 ImeAction。

keyboardActions = KeyboardActions(
    onDone = {},
    onGo = {},
    onNext = {},
    onPrevious = {},
    onSearch = {},
    onSend = {}
)

2.5 状态监听 interactionSource

val interactionSource = remember { MutableInteractionSource() }
val pressState by interactionSource.collectIsPressedAsState()
TextField(
    value = if (pressState) "按下" else "未按下",
    interactionSource = interactionSource
)

2.6 小眼睛隐藏密码显示 visualTransformation

@Composable
fun Demo(
    enableEye: Boolean
) {
    var isPasswordVisiable by remember { mutableStateOf(false) }
    TextField(
        trailingIcon = {
            if (enableEye) {
                Icon (
                    modifier = Modifier.clickable(
                        indication = null,
                        interactionSource = remember { MutableInteractionSource() },
                        onClick = { isPasswordVisiable = !isPasswordVisiable }
                    ),
                    painter = painterResource(if (isPasswordVisiable) R.drawable.icon_visiable else R.drawable.icon_invisiable),
                )
            }
        },
        visualTransformation = if (enableEye && ！isPasswordVisiable) PasswordVisualTransformation() else VisualTransformation.None,
        keyboardOptions = if (enableEye) KeyboardOptions(keyboardType = KeyboardType.Password) else KeyboardOptions.Default,
    )
}

2.7 自动获取焦点

val focusRequester = remember { FocusRequester() }
TextField(
    modifier = Modifier.focusRequester(focusRequester)
)
LaunchedEffect(Unit) { focusRequester.requestFocus() }    //调用写在输入框下面，如果写在上面最好加个delay

2.8 键盘显示隐藏

val softKeyboard = LocalSoftwareKeyboardController.current
LaunchedEffect(Unit) {
    softKeyboard?.show()    //显示
    softKeyboard?.hhide()    //隐藏
}

三、带边框的输入框 OutlinedTextField

代码可设置的内容同 TextField 一样。

四、基本输入框 BasicTextField

可设置内容少，适合自定义。innerTextField 是输入框的实现，必须并且也只能调用一次这个函数，在 decorationBox 中通过自定义 innerTextField 的调用位置等方式实现自定义自己需要的文本框的目的。

fun BasicTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,    //是否启用
    readOnly: Boolean = false,    //是否只读，不可编辑，可复制
    textStyle: TextStyle = TextStyle.Default,    //设置文本样式
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,    //输入类型
    keyboardActions: KeyboardActions = KeyboardActions.Default,    //键盘监听
    singleLine: Boolean = false,    //单行（设为true会忽略maxLines）
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,    //最大行数
    minLines: Int = 1,    //最小行数
    visualTransformation: VisualTransformation = VisualTransformation.None,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    cursorBrush: Brush = SolidColor(Color.Black),
    decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =
        @Composable { innerTextField -> innerTextField() }
) 

4.1 添加 Hint

@Composable
fun BasicInputBox(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    hint: String = "",
    singleLine: Boolean = true,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
) {
    BasicTextField(
        modifier = modifier,
        value = value,
        onValueChange = onValueChange,
        keyboardOptions = keyboardOptions,
        singleLine = singleLine,
        textStyle = TextStyle.Default.copy(color = AppColors.Black, fontSize = AppDimens.textPrimary),
        decorationBox = { innerTextField ->
            Row(
                modifier = Modifier.padding(horizontal = AppDimens.marginContent),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Box(contentAlignment = Alignment.CenterStart) {
                    if (value.isEmpty()) {
                        Text(
                            text = hint,
                            color = AppColors.Hint,
                            fontSize = AppDimens.textPrimary,
                            textAlign = TextAlign.Center
                        )
                    }
                    innerTextField()
                }
            }
        }
    )
}