如何在Jetpack Compose中实现带光标滚动的可滚动BasicTextField

要实现支持长文本输入、光标滚动到首尾并浏览文本的单行TextField，你可以按以下方式修改代码：

@Composable
fun AppScreen() {
    var value by remember { mutableStateOf(TextFieldValue()) }
    // 控制水平滚动的状态
    val scrollState = rememberScrollState()

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .border(BorderStroke(2.dp, Color.Blue), shape = RoundedCornerShape(4.dp))
    ) {
        BasicTextField(
            singleLine = true,
            value = value,
            onValueChange = { newText ->
                value = newText
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
                // 添加水平滚动支持
                .horizontalScroll(scrollState),
            // 确保单行文本不自动换行
            textStyle = TextStyle(whiteSpace = WhiteSpace.NoWrap)
        )

        // 监听光标位置变化，自动滚动到光标所在区域
        LaunchedEffect(value.selection) {
            val cursorIndex = value.selection.start
            val layout = value.layoutResult
            layout?.let {
                // 计算光标对应的水平偏移量
                val cursorOffset = it.getHorizontalPosition(cursorIndex, true)
                // 滚动到光标位置，保证光标可见
                scrollState.animateScrollTo(cursorOffset.toInt())
            }
        }
    }
}

核心改动说明： #

• 添加水平滚动能力：通过horizontalScroll(scrollState)给TextField绑定滚动状态，让超出宽度的长文本可以横向滚动。
• 光标跟随滚动：用LaunchedEffect监听光标位置变化，借助文本布局的getHorizontalPosition方法获取光标对应的水平偏移，再调用滚动状态的animateScrollTo方法，让滚动区域自动跟随光标移动，确保光标始终在可视范围内。
• 强制单行显示：配置textStyle = TextStyle(whiteSpace = WhiteSpace.NoWrap)，避免长文本自动换行，保证所有内容在单行内滚动展示。

修改后，用户输入长文本时，文本会保持单行横向滚动，拖动光标到文本首尾或任意位置时，滚动区域会自动跟随，方便浏览全部内容。

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