旧版Compose中为TextField Composable添加随文本滚动的滚动条

由于旧版Compose的TextField未内置滚动条功能，我们可以通过更底层的BasicTextField结合滚动状态管理组件来实现自定义滚动条，以下是具体实现方案：

核心实现代码 #

@Composable
fun ScrollableTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    placeholder: @Composable (() -> Unit)? = null,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default
) {
    val scrollState = rememberScrollState()
    Box(modifier = modifier) {
        // 使用BasicTextField实现可滚动文本输入
        BasicTextField(
            value = value,
            onValueChange = onValueChange,
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(scrollState)
                .padding(end = 16.dp), // 为右侧滚动条预留空间
            textStyle = MaterialTheme.typography.bodyLarge,
            keyboardOptions = keyboardOptions,
            keyboardActions = keyboardActions,
            decorationBox = { innerTextField ->
                // 模拟原生TextField的内边距与占位符逻辑
                Box(
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp)
                ) {
                    if (value.isEmpty() && placeholder != null) {
                        placeholder()
                    }
                    innerTextField()
                }
            }
        )
        // 绑定滚动条与文本滚动状态
        VerticalScrollbar(
            modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
            adapter = rememberScrollbarAdapter(scrollState)
        )
    }
}

代码说明 #

• BasicTextField替代TextField：旧版TextField封装程度高，无法直接接入滚动状态；BasicTextField提供了更灵活的自定义能力，允许我们添加滚动修饰符。
• 滚动状态管理：通过rememberScrollState创建滚动状态对象，绑定到verticalScroll修饰符，实现文本内容的滚动。
• 滚动条联动：VerticalScrollbar通过rememberScrollbarAdapter关联滚动状态，自动根据文本内容高度显示/隐藏，并随滚动位置同步更新。
• 样式对齐：通过decorationBox模拟原生TextField的内边距、占位符效果，确保自定义组件样式与原生组件一致。

扩展优化 #

• 自定义滚动条样式：可通过VerticalScrollbar的style参数调整滚动条的颜色、宽度、圆角等样式。
• 添加边框/圆角：在外层Box添加Modifier.border、Modifier.clip等修饰符，模拟OutlinedTextField或TextField的边框样式。
• 适配不同布局：根据实际需求调整padding、fillMaxSize等修饰符，适配不同的布局场景。

内容的提问来源于stack exchange，提问作者Saneen K P