Jetpack Compose中OutlinedTextField首次点击光标定位至开头问题问询

问题描述 #

开发编辑页面时，遇到一个异常：页面加载后OutlinedTextField已填充内容，但首次点击该输入框时，光标会定位在文本开头而非末尾。点击后虽能正常移动光标和编辑文本，但需要手动将光标移到末尾，影响使用体验。

相关代码示例：

OutlinedTextField(
    value = user.name,
    onValueChange = { onChange(user.copy(name = it)) },
    modifier = Modifier.fillMaxWidth(),
    label = { Text(text = stringResource(R.string.name)) },
    singleLine = true,
    enabled = enabled,
)

经测试，无论初始文本是动态获取的用户名称还是固定字符串，只要输入框是首次组合渲染的内容，都会触发该问题。目前已确认这是Jetpack Compose的Bug。

临时解决方法 #

可以通过TextFieldValue替代直接传入字符串值，手动初始化光标位置来规避这个问题：

// 初始化TextFieldValue状态，将光标默认定位在文本末尾
var nameTextFieldValue by remember {
    mutableStateOf(
        TextFieldValue(
            text = user.name,
            selection = TextRange(user.name.length)
        )
    )
}

OutlinedTextField(
    value = nameTextFieldValue,
    onValueChange = { newValue ->
        nameTextFieldValue = newValue
        // 更新用户数据
        onChange(user.copy(name = newValue.text))
    },
    modifier = Modifier.fillMaxWidth(),
    label = { Text(text = stringResource(R.string.name)) },
    singleLine = true,
    enabled = enabled,
)

原理是通过remember创建包含光标位置信息的TextFieldValue状态，初始化时将光标选择范围设置为文本长度对应的位置（即文本末尾），这样首次点击输入框时，光标就会直接定位在文本末尾，无需手动调整。

该方法属于临时 workaround，等官方修复此Bug后，即可换回原来直接传入字符串的写法。

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