在 TextField Jetpack Compose 中用户输入文本后显示尾随图标

Question

我正在尝试：

使 TextField 的 trailingIcon 可组合仅在用户输入除白色 spaces 以外的文本时可见。
稍后当用户单击 trailingIcon 时，TextField 中的文本应该被清除并且 trailingIcon 应该消失。
再次当用户输入 space 以外的文本时，trailingIcon 应该出现并启用此文本清除功能。

等等...

我试着寻找解决这个问题的方法，但他们大多关注“可见的 trailingIcons”，而不是我想要实现的。

Answer 1

根据文本状态，您可以为 trailingIcon 参数指定 null 或实际视图：

var text by remember { mutableStateOf("") }
val trailingIconView = @Composable {
    IconButton(
        onClick = {
            text = ""
        },
    ) {
        Icon(
            Icons.Default.Clear,
            contentDescription = "",
            tint = Color.Black
        )
    }
}
TextField(
    value = text,
    onValueChange = { text = it },
    trailingIcon = if (text.isNotBlank()) trailingIconView else null,
)

在 TextField Jetpack Compose 中用户输入文本后显示尾随图标

Show trailing icon after text input from user in TextField Jetpack Compose

textfield

android-jetpack-compose

kotlin-android