如何在未指定宽度的Column中添加LazyRow且不扩大父组件宽度？

你遇到的问题是：未指定宽度的Column会被内部LazyRow撑大，希望Column的宽度由其他子元素（比如示例中的Title文本）决定，LazyRow在这个宽度范围内横向滚动，就像DropdownMenu里的Slider那样——Slider不会撑大DropdownMenu，而是自适应其宽度。

解决方案 #

核心是通过固有尺寸测量让Column的宽度由非滚动子元素决定，同时让LazyRow填充Column的宽度。具体修改如下：

fun Test() {
    val items = listOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6")
    
    Column(
        modifier = Modifier
            .background(Color.Yellow)
            .width(IntrinsicSize.Max) // 关键：让Column取子元素的最大固有宽度
    ) {
        Text("Title", style = MaterialTheme.typography.titleLarge)
        LazyRow(
            modifier = Modifier.fillMaxWidth() // 让LazyRow填充Column的宽度
        ) {
            items(items){
                Text(text = it, modifier = Modifier.padding(horizontal = 8.dp))
            }
        }
    }
}

@Preview
@Composable
fun TestPreview() {
    Test()
}

原理说明 #

1. Modifier.width(IntrinsicSize.Max)：让Column先测量所有子元素的「固有宽度」（即元素自身需要的最小宽度），然后取最大值作为自身宽度。这里Title文本的固有宽度会成为Column的宽度，而LazyRow因为设置了fillMaxWidth()，它的固有宽度依赖父容器，不会参与Column的宽度计算。
2. LazyRow添加fillMaxWidth()：让LazyRow填充Column的宽度，超出Column宽度的内容会自动横向滚动，和DropdownMenu里的Slider行为一致——Slider默认填充父容器宽度，不会撑大DropdownMenu，因为DropdownMenu本身就是基于内部子元素的固有宽度来确定自身尺寸的。

补充说明 #

如果Column内有多个非滚动子元素，IntrinsicSize.Max会取这些子元素中最宽的那个作为Column的宽度，完全符合你需要的「保持不含LazyRow时的宽度」的需求。

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