Jetpack Compose中OutlinedTextField初始光标不居中问题求助

问题根源在于初始设置光标时，TextField尚未完成居中布局计算，导致光标位置基于左对齐逻辑渲染，输入字符后布局重算才恢复正常。以下是保留光标在文本末尾需求的修复方案：

修改后的代码 #

@Composable
fun CenteredTextField(
    text: String, 
    onTextChange: (String) -> Unit, 
    modifier: Modifier = Modifier
) {
    val focusRequester = remember { FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current
    // 初始化时直接设置光标在文本末尾，并依赖传入的text参数
    val textFieldValue = remember(text) { 
        mutableStateOf(TextFieldValue(text, selection = TextRange(text.length))) 
    }

    // 同步外部传入的text变化，始终保持光标在末尾
    LaunchedEffect(text) {
        if (textFieldValue.value.text != text) {
            textFieldValue.value = TextFieldValue(text, selection = TextRange(text.length))
        }
    }

    LaunchedEffect(Unit) {
        focusRequester.requestFocus()
        keyboardController?.show()
        // 等待UI完成一帧布局后再确认光标位置，确保居中布局已生效
        awaitFrame()
        textFieldValue.value = textFieldValue.value.copy(
            selection = TextRange(textFieldValue.value.text.length)
        )
    }

    Box(
        contentAlignment = Alignment.Center, 
        modifier = modifier.fillMaxWidth()
    ) {
        OutlinedTextField(
            value = textFieldValue.value,
            onValueChange = { newValue ->
                textFieldValue.value = newValue
                onTextChange(newValue.text)
            },
            modifier = Modifier
                .align(Alignment.Center)
                .widthIn(min = 100.dp)
                .padding(horizontal = 16.dp)
                .focusRequester(focusRequester),
            textStyle = TextStyle(textAlign = TextAlign.Center)
        )
    }
}

关键修改说明 #

• 初始化时设置光标：remember(text)确保每次传入的text变化时，重新初始化TextFieldValue并将光标置于文本末尾。
• 同步外部text变化：通过LaunchedEffect(text)监听外部传入的文本更新，避免组件内部状态与外部数据不一致。
• 等待布局完成：使用awaitFrame()等待UI完成一帧渲染，确保TextField的居中布局计算完成后再设置光标，此时光标位置会跟随居中的文本正确显示。

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