android - 如何清除 Jetpack Compose 中的文本字段值？

Question

我开发了一个带有尾随图标的可组合文本输入，我想在单击图标时清除文本输入。如何访问 textInput 值，以便清除它？

    @Composable
fun TextInput(
    myVal: String,
    label: String,
    placeholder: String="",
    helperText: String="",
    errorText: String="",
    onValueChange : (String) -> Unit){
    val hasError = !errorText.isNullOrEmpty()
    val helperColor =  if (hasError)
        Color(0xFFfe392f)
        else
            Color(0xFF5c6a79)

    Row() {
            Column() {
                TextField(
                    colors = TextFieldDefaults.textFieldColors(
                        backgroundColor = Color.Transparent,
                        textColor = Color(0xFF011e41),
                        cursorColor = Color(0xFF011e41),
                        focusedLabelColor = Color(0xFF011e41),
                        unfocusedLabelColor = Color(0xFF011e41),
                        unfocusedIndicatorColor = Color(0xFFebeced),
                        focusedIndicatorColor = Color(0xFF011e41),
                        errorCursorColor = Color(0xFFfe392f),
                        errorIndicatorColor = Color(0xFFfe392f),
                        errorLabelColor = Color(0xFFfe392f)
                    ),
                    value = myVal,
                    onValueChange = onValueChange,
                    label = { Text(label) },
                    placeholder = { Text(placeholder) },
                    isError = hasError,
                    trailingIcon = {Icon(Icons.Filled.Email, contentDescription = "sdsd", modifier = Modifier.offset(x= 10.dp).clickable {
                       //What should I do here?
                    })}
                )

                Text(
                    modifier = Modifier.padding(8.dp),
                    text = if (hasError) errorText else helperText,
                    fontSize = 12.sp,
                    color = helperColor,
                )
            }
    }
}

它是这样使用的：

var text by remember { mutableStateOf("") }
                    TextInput(myVal = text, label = "label", helperText = "", errorText = "my error") {text = it}

Answer 1

只需使用类似的东西：

TextField(
    value = text,
    onValueChange = { /*...*/ },
    trailingIcon = {Icon(Icons.Filled.Clear,
         contentDescription = "clear text",
         modifier = Modifier.offset(x= 10.dp).
         clickable {
            text = ""
         }
    )}
)

Answer 2

尾随图标的单击处理程序必须使用空字符串调用 TextField 的 onValueChange：

       ...
       trailingIcon = {Icon(Icons.Filled.Email, contentDescription = "sdsd", modifier = Modifier.offset(x= 10.dp).clickable {
           onValueChange("") // just send an update that the field is now empty
       })}
       ...

Answer 3

这将实现这一点

//Caller
val text by remember { mutableStateOf (...) }

TextInput(text, ..., ...,)

//Composable
@Composable
fun TextInput(text, ..., ...){
val textState by remember { mutableStateOf (text) }
TextField(
 value = textState,
trailingIcon = {
 Icon(..., Modifier.clickable { textState = "" })
}
}