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

Question

我正在尝试:

1. 使 TextField 的 trailingIcon 仅在用户输入空格以外的文本时才可见。
2. 稍后当用户单击 trailingIcon 时，TextField 中的文本应该被清除并且 trailingIcon 应该消失。
3. 同样，当用户输入空格以外的文本时，trailingIcon 应该出现并启用此文本清除功能。

等等……

我尝试寻找解决此问题的方法，但大多数人都关注“可见的 trailingIcons”，而不是我试图实现的内容。

Answer 1

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

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