Jetpack Compose中如何实现Text组件鼠标选中文本并自动滚动？

核心问题分析 #

• 用SelectionContainer包裹Text：仅支持文本选中，但拖动鼠标到文本边缘时无法自动滚动，体验远不如TextField。
• 用readOnly = true的TextField：原生支持选中自动滚动，但默认初始状态会滚动到文本末尾，不符合需求。
• 直接给TextField加Modifier.horizontalScroll(rememberScrollState(0))：会破坏原生的选中滚动逻辑，只能选中可见区域文本，且拖动时无法自动滚动。

可行解决方案 #

利用TextField原生的选中滚动能力，通过代码强制初始滚动到文本开头，无需额外自定义手势逻辑，同时可以调整外观让它更接近Text组件。

代码示例 #

@Composable
fun SelectableScrollableText() {
    val longText = "这是一段非常长的单行文本，用来测试鼠标选中时的自动滚动功能。当你拖动鼠标到文本的左右边缘时，文本会自动滚动，同时保持选中状态。这样既保留了TextField的原生选中体验，又能确保初始时显示文本的开头部分。"
    val scrollState = rememberScrollState()

    TextField(
        value = longText,
        onValueChange = {}, // readOnly模式下无需处理输入变更
        readOnly = true,
        modifier = Modifier
            .horizontalScroll(scrollState)
            .fillMaxWidth(),
        textStyle = TextStyle(fontSize = 16.sp),
        singleLine = true, // 单行文本场景，多行可移除该参数并配合verticalScroll
        // 可选：隐藏TextField的边框、光标等，让外观更接近Text组件
        colors = TextFieldDefaults.colors(
            focusedContainerColor = Color.Transparent,
            unfocusedContainerColor = Color.Transparent,
            disabledContainerColor = Color.Transparent,
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent
        ),
        cursorVisible = false
    )

    // 初始时强制滚动到文本开头
    LaunchedEffect(Unit) {
        scrollState.scrollTo(0)
    }
}

方案说明 #

1. 保留原生功能：readOnly的TextField原生支持鼠标选中时的自动滚动，无需额外实现复杂的手势逻辑。
2. 初始滚动修正：通过LaunchedEffect在组件首次渲染时，调用scrollState.scrollTo(0)将文本滚动到开头，解决默认滚到末尾的问题。
3. 外观适配：通过TextFieldDefaults.colors隐藏边框、背景，关闭光标，让组件外观和Text完全一致。

备选复杂方案（不推荐） #

如果坚持使用Text + SelectionContainer，需要自定义手势检测，监听鼠标拖动位置，当鼠标处于组件边缘时触发滚动。但这种方法需要手动处理滚动时机和选中范围，代码复杂度高，且难以达到TextField的原生体验，因此不推荐。

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