Jetpack Compose TextField 是否存在辅助文本、错误消息、字符计数器？

Question

在材料设计中TextField 页面 TextField具有以下属性

辅助元素提供有关在文本字段中输入的文本的更多详细信息。

1. 帮助文本 帮助文本传达有关输入字段的附加指导，例如如何使用它。它应该只占据一行，持续可见或仅在焦点上可见。

2. 错误消息 当不接受文本输入时，错误消息会显示有关如何修复它的说明。错误消息显示在输入行下方，替换帮助文本直到修复。

3. 图标 图标也可用于发送警报消息。将它们与错误消息配对以提供冗余警报，这在您需要为色盲用户进行设计时非常有用。

4. 字符计数器 如果存在字符或字数限制，则应使用字符或字数计数器。它们显示所用字符的比率和总字符限制。

Jetpack Compose TextField截至目前，这些属性是否存在compose 1.0.0-alpha09？

Answer 1

使用M3，您可以使用属性supportingText，该属性是显示在文本字段下方的可选支持文本。

对于字符数，您必须应用textAlign = TextAlign.End：

val maxChar = 5

TextField(
    value = text,
    onValueChange = {
        if (it.length <= maxChar) text = it
    },
    modifier = Modifier.fillMaxWidth(),
    supportingText = {
        Text(
            text = "${text.length} / $maxChar",
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.End,
        )
    },
)

相同的属性可用于帮助文本和消息错误：

val errorMessage = "Text input too long"
var text by rememberSaveable { mutableStateOf("") }
var isError by rememberSaveable { mutableStateOf(false) }
val charLimit = 10

fun validate(text: String) {
    isError = text.length > charLimit
}

TextField(
    value = text,
    onValueChange = {
        text = it
        validate(text)
    },
    singleLine = true,
    isError = isError,
    supportingText = {
        if (isError) {
            Text(
                modifier = Modifier.fillMaxWidth(),
                text = "Limit: ${text.length}/$charLimit",
                color = MaterialTheme.colorScheme.error
            )
        }
    },
    trailingIcon = {
        if (isError)
                Icon(Icons.Filled.Error,"error", tint = MaterialTheme.colorScheme.error)
     }
)

没有M2内置属性来显示错误消息或计数器文本。
但是，您可以使用自定义可组合项。

对于错误消息，您可以使用类似以下内容：

var text by rememberSaveable { mutableStateOf("") }
var isError by rememberSaveable { mutableStateOf(false) }

fun validate(text: String) {
    isError = /* .... */
}

Column {
    TextField(
        value = text,
        onValueChange = {
            text = it
            isError = false
        },
        trailingIcon = {
            if (isError)
            Icon(Icons.Filled.Error,"error", tint = MaterialTheme.colors.error)
        },
        singleLine = true,
        isError = isError,
        keyboardActions = KeyboardActions { validate(text) },
    )
    if (isError) {
        Text(
            text = "Error message",
            color = MaterialTheme.colors.error,
            style = MaterialTheme.typography.caption,
            modifier = Modifier.padding(start = 16.dp)
        )
    }
}

要显示计数器文本，您可以使用以下命令：

val maxChar = 5
Column(){
    TextField(
        value = text,
        onValueChange = {
            if (it.length <= maxChar) text = it
        },
        modifier = Modifier.fillMaxWidth()
    )
    Text(
        text = "${text.length} / $maxChar",
        textAlign = TextAlign.End,
        style = MaterialTheme.typography.caption,
        modifier = Modifier.fillMaxWidth().padding(end = 16.dp)
    )
}