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

Do Assistive Text, Error Message, Character Counter exist for Jetpack Compose TextField?(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是否存在辅助文本、错误消息、字符计数器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Jetpack Compose Textfield是否存在辅助文本、错误消息、字符计数器?

基础教程推荐