如何在Jetpack Compose中清除文本框的值？

Question

我已经开发了一个带有尾部图标的textInput组件，当单击图标时我想要清除textInput中的文本。我该如何访问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}

- Arash Shahzamani

Answer 1

您可以使用带有自定义 clickable 修饰符的 trailingIcon 属性。
类似于：

var text by rememberSaveable { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    trailingIcon = {
        Icon(Icons.Default.Clear,
            contentDescription = "clear text",
            modifier = Modifier
                .clickable {
                    text = ""
                }
        )
    }
)

如果您正在使用TextFieldValue：

val content = "content"
var text by rememberSaveable(stateSaver = TextFieldValue.Saver) {
    mutableStateOf(TextFieldValue(content))
}

TextField(
    value = text,
    onValueChange = { text = it },
    trailingIcon = {
        Icon(Icons.Default.Clear,
            contentDescription = "clear text",
            modifier = Modifier
                .clickable {
                    text = TextFieldValue("")
                }
        )
    }
)

- Gabriele Mariotti

---

这仅在文本变量引用字符串时起作用。如果它是TextFieldValue对象，则不会起作用。需要使用TextFieldValue处理需要操作光标的情况，例如将其放置在文本末尾。 - Johann

@Johann 在这种情况下，您只需在 trailingIcon 的 clickable 修饰符中使用不同的代码即可。回答已更新。 - Gabriele Mariotti

Answer 2

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

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

- Rob Meeuwisse

---

优雅且合乎逻辑 - Richard Onslow Roper

Answer 3

使用 trailingIcon 组合属性与 IconButton 一起使用，可以将图标的背景选择器与主题的其余部分匹配。您还可以设置空条件，仅在文本字段中有输入时显示它。

下面是示例代码片段：

var text by remember { mutableStateOf ("") }

TextField(
    trailingIcon = {
        when {
            text.isNotEmpty() -> IconButton(onClick = {
                text = ""
            }) {
                Icon(
                    imageVector = Icons.Filled.Clear,
                    contentDescription = "Clear"
                )
            }
        }
    }
)

- Vikas Patidar

Answer 4

这将实现这个目标

//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 = "" })
}
}

- Richard Onslow Roper