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

kninwzqo  于 2022-12-28  发布在  Android
关注(0)|答案(2)|浏览(147)

我正在努力:
1.使TextField组合的trailingIcon仅在用户输入除空格以外的文本时可见。
1.稍后,当用户单击trailingIcon时,TextField中的文本应被清除,trailingIcon应消失。
1.同样,当用户输入文本而不是空格时,trailingIcon应出现并启用此文本清除功能。
等等...
我试着寻找这个问题的解决方案,但大多数都集中在"可见的trailingIcons"上,而不是我试图实现的。

ubof19bj

ubof19bj1#

根据文本状态,可以为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,
)
hgncfbus

hgncfbus2#

您可以添加条件以使trailingIcon可见。
例如:

var text by remember { mutableStateOf("") }
val isVisible by remember {
    derivedStateOf {
        text.isNotBlank()
    }
}

OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    trailingIcon = {
        if (isVisible) {
            IconButton(
                onClick = { text = "" }
            ) {
                Icon(
                    imageVector = Icons.Default.Clear,
                    contentDescription = "Clear"
                )
            }
        }
    }
)

相关问题