我正在努力:1.使TextField组合的trailingIcon仅在用户输入除空格以外的文本时可见。1.稍后,当用户单击trailingIcon时,TextField中的文本应被清除,trailingIcon应消失。1.同样,当用户输入文本而不是空格时,trailingIcon应出现并启用此文本清除功能。等等...我试着寻找这个问题的解决方案,但大多数都集中在"可见的trailingIcons"上,而不是我试图实现的。
TextField
trailingIcon
trailingIcons
ubof19bj1#
根据文本状态,可以为trailingIcon参数指定null或实际视图:
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, )
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" ) } } } )
2条答案
按热度按时间ubof19bj1#
根据文本状态,可以为
trailingIcon
参数指定null
或实际视图:hgncfbus2#
您可以添加条件以使
trailingIcon
可见。例如: