基于 BasicTextField 自定义一个带 Hint 的 TextField

官方那些花里胡哨的一般都用不着，包括我自己写的项目也找不到合适的使用的地方，所以往往只需要一个简单的输入框即可，但是使用过程中发现，这个简单的 Hint 居然是作为一个扩展功能在后面好几个版本的迭代中才开发出来，看到那一堆的属性，还是自己自定义吧。

代码：

@OptIn(ExperimentalUnitApi::class)
@Composable
fun SimpleHintText(
    modifier: Modifier,
    input: MutableState<String>, hintText: String, onValueChange: (String) -> Unit,
    textStyle: TextStyle = TextStyle.Default,
    singleLine: Boolean = false
) {
    val hint = remember {
        mutableStateOf(input.value.isEmpty())
    }

    BasicTextField(
        value = input.value,
        textStyle = textStyle,
        onValueChange = { newStr ->
            hint.value = newStr.isEmpty()
            onValueChange.invoke(newStr)
        },
        singleLine = singleLine,
        modifier = modifier,
        decorationBox = { innerTextField ->
            if (hint.value) {
                Text(text = hintText, color = colorResource(id = R.color.colorTextTint), fontSize = textStyle.fontSize)
            }
            innerTextField()
        }
    )
}

用法示例（其实很好理解）：

val input = remember {
    mutableStateOf("")
}
val hintText = stringResource(id = R.string.label_classify_filter_input_hint)
SimpleHintText(
    modifier = Modifier.fillMaxWidth(), input = input, hintText, onValueChange = {
        input.value = it
        // do sth else.
    }, textStyle = TextStyle(
        color = colorResource(id = R.color.colorOnContent),
        fontSize = TextUnit(16f, TextUnitType.Sp),
    ), singleLine = true
)

也算是简单提供下思路吧，我一开始主要卡在了 decorationBox 的使用上，后来知道原来还得加上 innerTextField()，再看写法就知道了，这个装饰器的用法就是：只要把 innerTextField 放后面确保能输入就行，其他随便写。