Jetpack Compose OutlinedTextField占位符异常问题咨询

问题场景 #

使用Compose的OutlinedTextField实现金额输入框，代码如下：

OutlinedTextField(
    modifier = modifier ...
    label = { Text("Amount") },
    value = value.toString(), // value为Int类型参数
    onValueChange = updateAmount, // 回调函数
    placeholder = { Text("0") } // 占位符设为"0"
)

出现的异常现象：

• 正常输入时，占位符消失，输入内容正常显示；
• 删除所有输入内容后，占位符"0"重新显示，但光标位于占位符文本前方；
• 再次输入时，新输入的内容会和占位符"0"拼接，比如输入"1"变成"10"，输入"12"变成"120"，占位符实际成为了输入内容的一部分。

问题原因 #

这不是Compose的特性，而是value类型与输入框文本逻辑不匹配导致的异常：

1. 输入框的value绑定的是Int类型的转字符串结果，当Int值为0时，value.toString()输出"0"，此时输入框显示的是实际文本"0"，而非占位符；
2. 当用户删除所有内容时，onValueChange会收到空字符串，若updateAmount回调未正确处理空字符串转Int的逻辑，会导致输入框的文本状态与占位符显示逻辑冲突，出现光标位置异常、占位符被当作输入内容的情况。

解决方案 #

方案1：改用String类型维护输入值（推荐） #

输入框本质是文本输入，用String类型存储值更贴合场景，后续需要Int时再做转换：

// 假设value改为MutableState<String>，初始值为空
OutlinedTextField(
    modifier = modifier ...
    label = { Text("Amount") },
    value = value,
    onValueChange = { value = it },
    placeholder = { Text("0") }
)

// 需要转Int时处理
val amount = value.toIntOrNull() ?: 0

方案2：保留Int类型，调整显示逻辑 #

若必须用Int类型存储值，需在显示时做判断，当值为0时显示空字符串，让占位符正常生效：

OutlinedTextField(
    modifier = modifier ...
    label = { Text("Amount") },
    value = if (value == 0) "" else value.toString(),
    onValueChange = { input ->
        // 空字符串转Int默认设为0
        val newAmount = input.toIntOrNull() ?: 0
        updateAmount(newAmount)
    },
    placeholder = { Text("0") }
)

以上两种方案都能避免占位符与输入文本冲突的问题，确保光标位置正常，占位符仅在输入框为空时显示。

内容的提问来源于stack exchange，提问作者Ait-Gacem Nabil