Jetpack LazyColumn设置Arrangement.Top后稀疏项未顶部分组问题

我开发的应用使用Jetpack Compose的LazyColumn组件，已设置verticalArrangement = Arrangement.Top，但设备运行时，当列表项不足以填满整个列时，项之间会被均等分配较大间距，无法顶部分组。项目API版本均设置为34，预览界面显示正常（间距极小），通过Layout Inspector也未发现异常属性线索。

相关代码如下：

LazyColumn(
        modifier = modifier
            .padding(4.dp),
        verticalArrangement = Arrangement.Top
    ) {
        items(
            items = airports,
            key = { airport -> airport.id }
        ) { airport ->
            if (airport.id != currentAirport.id) {
                Card(
                    modifier = modifier
                        .fillMaxWidth(),
                    colors = CardDefaults.cardColors(
                        containerColor = MaterialTheme.colorScheme.surfaceVariant
                    ),
                    elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
                ) {
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(4.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Column(
                            modifier = Modifier
                                .fillMaxHeight()
                                .weight(1f)
                        ) {
                            Text(
                                text = stringResource(R.string.depart),
                            )
                            AirportInfoRow(airport = currentAirport)
                            Text(
                                text = stringResource(R.string.arrive)
                            )
                            AirportInfoRow(airport = airport)
                        }
                        Column(
                            modifier = Modifier
                                .width(30.dp),
                        ) {
                            Image(
                                painter = painterResource(id = R.drawable.star_outline),
                                contentDescription = "",
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .clickable { } // TODO toggle favorite
                            )

                        }
                    }
                }
            }
        }
    }

布局检查器截图：

核心原因 #

问题出在Card组件复用了外部LazyColumn的modifier，这个外部modifier大概率被上层函数传递时附加了fillMaxHeight()（或类似强制占满高度的属性）。虽然你代码里只写了.padding(4.dp)，但一旦外部modifier带有占满高度的设置，就会让每个Card强制拉伸填充可用空间，最终导致LazyColumn的项被均分高度，看起来像是间距变大。

预览正常是因为预览环境中传递的modifier没有fillMaxHeight()，而运行时的modifier带有该属性，才出现显示差异。

解决步骤 #

1. 不要直接复用外部modifier给Card，改用全新的Modifier：

   Card(
       modifier = Modifier // 新建Modifier，不使用外部传递的modifier
           .fillMaxWidth(),
       // 其他属性保持不变
   ) {
       // ... 内部布局代码
   }
   

2. 如果需要保留外部modifier的部分特性（比如padding），可以将外部modifier与新Modifier组合，同时避免高度强制拉伸：

   Card(
       modifier = modifier
           .fillMaxWidth()
           .wrapContentHeight(), // 覆盖可能存在的fillMaxHeight()
       // 其他属性保持不变
   ) {
       // ... 内部布局代码
   }
   

3. 额外检查AirportInfoRow组件内部，确保没有设置fillMaxHeight()之类的属性，避免间接导致Card被拉伸。

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