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

Question

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

androidandroid-jetpack-composeandroid-compose-textfield

9

在Material Design中，TextField有一些属性，如TextField页中所示。

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

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

错误消息当文本输入不被接受时，错误消息可以显示有关如何修复问题的说明。错误消息显示在输入行下方，替换帮助文本，直到问题解决。

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

字符计数器如果有字符或字数限制，则应该使用字符或字数计数器。它们显示使用的字符比和总字符限制。

截至Compose 1.0.0-alpha09，Jetpack Compose TextField是否具有这些属性呢？

- Thracian

1

根据问题跟踪器显示，看起来这个问题正在进行中。https://issuetracker.google.com/issues/182142737 - Victor Ude

1

以上问题已在beta06中得到解决，但它并没有引入OP缺失的任何属性。 - Tom

根据此更改（https://android-review.googlesource.com/c/platform/frameworks/support/+/1651127/9/compose/material/material/src/commonMain/kotlin/androidx/compose/material/TextFieldImpl.kt#139），只需将“isError”属性添加到您的文本字段中。然而，不知道字数/字符计数器是如何实现的。 - Mirjalal

2个回答

1

trailingIcon用于图标。

对于底部的文本，我只是使用了

Text(
    text = "Error message",
    color = MaterialTheme.colors.error,
    style = MaterialTheme.typography.caption,
    modifier = Modifier.padding(start = 16.dp)
)

也许会在以后包含？奇怪的是，isError 的文档说：

指示文本字段当前值是否存在错误。如果设置为true，则默认情况下标签、底部指示器和尾随图标将显示错误颜色。

底部指示器是什么？并没有这样的东西。奇怪。

- Edward van Raak

底部指示器是文本字段下方的线条，如果设置了 isError，它也会变为红色。 - wujek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Mariotti · Accepted Answer

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