Jetpack Compose：首次聚焦TextField时无法将光标定位到文本末尾

问题描述 #

按照常规方式设置初始文本并将光标定位到文本末尾，代码如下：

var textState by remember { mutableStateOf(TextFieldValue("Hello", TextRange(4))) }
TextField(
    value = textState,
    onValueChange = { textState = it }
)

但实际运行时，首次聚焦该TextField时，光标却出现在文本开头；若将onValueChange设为空实现（仅测试用），光标则能正常显示在文本末尾，onValueChange的实现逻辑直接影响了光标位置。

原因分析 #

问题核心在于TextField的焦点处理逻辑与State更新的时机冲突：

• 首次聚焦TextField时，其内部逻辑会自动将光标重置到文本开头，生成一个光标位置在开头的TextFieldValue实例。
• 当onValueChange回调触发时，你会把这个被修改后的TextFieldValue赋值回textState，直接覆盖了初始化时设置的光标在末尾的状态，最终导致光标显示在开头。
• 若onValueChange为空实现，textState不会被更新，组件始终使用你初始设置的TextFieldValue，因此光标位置正常。

解决方案 #

方案1：通过FocusRequester手动控制聚焦与光标位置 #

使用FocusRequester主动请求焦点，并在聚焦完成后手动设置光标到文本末尾，规避内部逻辑的干扰：

val focusRequester = remember { FocusRequester() }
var textState by remember { mutableStateOf(TextFieldValue("Hello")) }

LaunchedEffect(Unit) {
    focusRequester.requestFocus()
    val textLength = textState.text.length
    textState = textState.copy(selection = TextRange(textLength))
}

TextField(
    value = textState,
    onValueChange = { textState = it },
    modifier = Modifier.focusRequester(focusRequester)
)

方案2：在onValueChange中修正首次聚焦的光标位置 #

通过标记位判断是否为首次聚焦，当检测到光标被内部逻辑重置时，手动修正到文本末尾：

var isFirstFocus by remember { mutableStateOf(true) }
val initialText = "Hello"
var textState by remember { 
    mutableStateOf(TextFieldValue(initialText, TextRange(initialText.length))) 
}

TextField(
    value = textState,
    onValueChange = { newState ->
        if (isFirstFocus && newState.selection.start == 0 && newState.text == initialText) {
            textState = newState.copy(selection = TextRange(newState.text.length))
            isFirstFocus = false
        } else {
            textState = newState
        }
    },
    onFocusChanged = { focusState ->
        if (focusState.isFocused) {
            isFirstFocus = true
        }
    }
)

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