Jetpack Compose中如何让BasicTextField横向滚动自适应内容？

问题核心是horizontalScroll修饰符会强制让组件具备滚动能力，哪怕内容完全适配容器宽度。要实现类似wrap content的自适应效果，关键是仅当文本宽度超出容器宽度时才启用横向滚动，可以通过以下方式实现：

具体实现代码 #

var text by remember { mutableStateOf("") }
var scrollState by remember { mutableStateOf(ScrollState(0)) }
// 存储文本实际宽度和容器宽度
var textWidth by remember { mutableStateOf(0f) }
var containerWidth by remember { mutableStateOf(0f) }

BasicTextField(
    value = text,
    onValueChange = { text = it },
    singleLine = true,
    modifier = Modifier
        // 获取容器的宽度
        .onSizeChanged { containerWidth = it.width.toFloat() }
        // 动态决定是否添加横向滚动修饰符
        .run {
            if (textWidth > containerWidth) {
                this.horizontalScroll(scrollState, reverseScrolling = true)
            } else {
                this
            }
        },
    // 获取文本布局的实际宽度
    onTextLayout = { textLayoutResult ->
        textWidth = textLayoutResult.size.width.toFloat()
    }
)

代码说明 #

1. onSizeChanged：监听BasicTextField的容器宽度，实时更新containerWidth状态
2. onTextLayout：每次文本布局完成后，获取文本的实际渲染宽度，更新textWidth状态
3. 动态修饰符：通过run判断textWidth是否大于containerWidth，只有超出时才添加horizontalScroll，否则保持普通的wrap content状态

这样就能实现和singleLine = true且未加滚动时一致的自适应效果：内容未超出时无法滚动，只有内容超过容器宽度时才允许横向滚动。

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