Jetpack Compose：点击右侧图标清空自定义TextField内容的优化方案

我正在制作一个自定义TextField，需要实现点击右侧图标清空文本的功能。现有代码里textFieldValue.text是val类型，没法直接重新赋值。目前我能想到的只有重新组合整个TextField并传入空文本，想问有没有更优的实现方式？

原代码如下：

var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver)
    { mutableStateOf(TextFieldValue("")) }

MyTextField(
    text = textFieldValue,
    onValueChange = {
        textFieldValue = it
    },
    leftIconClickable = { /*Do nothing*/ },
    rightIconClickable = { textFieldValue.text  = "" }
)

（注：当前MyTextField的代码与Jetpack Compose原生TextField几乎一致，主要区别是新增了两个图标的点击事件参数）

最优实现方案 #

TextFieldValue是不可变数据类，所以不能直接修改它的text属性。正确的做法是借助数据类的copy()方法创建新实例，通过状态更新逻辑来处理，这完全符合Compose的状态管理规范，不需要手动强制重组组件。

修改后的代码：

var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
    mutableStateOf(TextFieldValue(""))
}

MyTextField(
    text = textFieldValue,
    onValueChange = { textFieldValue = it },
    leftIconClickable = { /* 无需操作 */ },
    rightIconClickable = {
        // 用copy创建新实例，清空文本，同时保留原有的光标/选择状态（可选）
        textFieldValue = textFieldValue.copy(text = "")
    }
)

补充说明： #

• 使用copy()是Kotlin数据类的标准操作，它会复用原对象未修改的属性（比如光标位置、选中范围），比直接创建全新TextFieldValue实例更高效。
• 状态更新后Compose会自动触发必要的重组，不需要额外操作，这是最贴合Compose设计理念的实现方式。

内容的提问来源于stack exchange，提问作者Jose Gonzalez