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

Do Assistive Text, Error Message, Character Counter exist for Jetpack Compose TextField?(Jetpack Compose Textfield是否存在辅助文本、错误消息、字符计数器？)

问题描述

在材料设计中TextField pageTextField具有

辅助元素提供有关输入的文本的其他详细信息 文本字段。

1. Helper Text Helper Text传达有关输入字段的其他指导，例如如何使用它。它应该只占一张单人票 线条，持续可见或仅在焦点上可见。

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

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

4. 如果有字符或单词限制，则应使用字符计数器或单词计数器。它们显示的是 使用的字符数和总字符数限制。

自compose 1.0.0-alpha09起，Jetpack Compose TextField是否存在这些属性？

推荐答案

1.0.x没有用于显示错误消息或计数器文本的内置属性。
但是，您可以使用自定义可合成组件。

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

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)
    )
}

这篇关于Jetpack Compose Textfield是否存在辅助文本、错误消息、字符计数器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！