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是否存在辅助文本、错误消息、字符计数器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！