如何在Jetpack Compose中实现可复用TextField组件并修复相关报错？

问题根源 #

• 你定义的TextFieldComponent中state参数类型错误声明为Any，且Kotlin函数参数默认是只读val，你在onValueChange中尝试直接修改state参数本身就不符合语法规则，会触发编译报错。
• 调用组件时使用by关键字代理mutableStateOf，拿到的是String类型的原始值，没有持有State的引用，子组件无法反向更新父组件的状态。

修复方案1：传入MutableState对象（快速适配原有写法） #

自定义组件修改为： #

@Composable
fun TextFieldComponent(state: MutableState<String>, placeholder: String) {
    TextField(
        value = state.value,
        onValueChange = { textFieldValue -> state.value = textFieldValue },
        placeholder = { Text(placeholder, color = MaterialTheme.colors.secondary) }
    )
}

调用代码修改为： #

// 去掉by关键字，直接持有MutableState对象
val textFieldState = rememberSaveable { mutableStateOf("") }
TextFieldComponent(state = textFieldState, placeholder = "Email")

修复方案2：状态提升（符合Compose设计规范，更推荐） #

这种写法遵循单向数据流原则，组件复用性更强，也方便后续扩展输入校验、格式转换等逻辑。

自定义组件修改为： #

@Composable
fun TextFieldComponent(
    value: String,
    onValueChange: (String) -> Unit,
    placeholder: String
) {
    TextField(
        value = value,
        onValueChange = onValueChange,
        placeholder = { Text(placeholder, color = MaterialTheme.colors.secondary) }
    )
}

调用代码修改为： #

val textFieldState by rememberSaveable { mutableStateOf("") }
TextFieldComponent(
    value = textFieldState,
    onValueChange = { textFieldState = it },
    placeholder = "Email"
)

如果需要限制输入长度、过滤特殊字符，直接在onValueChange的回调中处理即可，不需要修改自定义组件内部逻辑

内容的提问来源于stack exchange，提问作者Saif Essam