jetpack compose TextField限制字数

使用Jetpack Compose的TextField控件可以通过设置一个限制器（`VisualTransformation`）来限制输入的字数。下面是一个示例代码：

import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.KeyboardType
import androidx.compose.material.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun LimitedTextField(maxLength: Int, value: String, onValueChange: (String) -> Unit) {
    var text by remember { mutableStateOf(value) }
    TextField(
        value = text,
        onValueChange = {
            if (it.length <= maxLength) {
                text = it
                onValueChange(it)
            }
        },
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Text
        ),
        visualTransformation = object : VisualTransformation {
            override fun filter(text: AnnotatedString): TransformedText {
                return if (text.text.length <= maxLength) {
                    TransformedText(text)
                } else {
                    TransformedText(AnnotatedString(text.text.substring(0, maxLength)))
                }
            }
        }
    )
}

@Preview
@Composable
fun LimitedTextFieldPreview() {
    LimitedTextField(maxLength = 10, value = "", onValueChange = {})
}

这里的`LimitedTextField`函数是一个自定义的组件，它接受`maxLength`、`value`和`onValueChange`作为参数。在`TextField`的`onValueChange`回调中，我们检查输入的文本长度是否小于等于`maxLength`，如果是，则更新文本并调用`onValueChange`回调函数。同时，我们还使用`visualTransformation`来限制输入的文本长度，超过限制时会截断文本。

你可以通过调用`LimitedTextField`函数来创建一个限制字数的文本输入框。例如，`LimitedTextField(maxLength = 20, value = "", onValueChange = { /* 处理输入的文本 */ })`。