如何使Jetpack Compose LazyVerticalGrid所有单元格尺寸一致？

我使用两列的LazyVerticalGrid，希望所有子项尺寸完全一致。目前宽度已经统一，但高度无法保持相同（无法占据全部可用高度），尤其是NewDayComponent始终达不到最大高度。我尝试给Card设置IntrinsicHeight，但没有解决问题。以下是我的代码：

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    modifier = modifier,
    contentPadding = PaddingValues(dimensionResource(id = R.dimen.margin_large)),
    verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.margin_medium)),
    horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.margin_large))
) {
    items(days,
        key = { day -> day.startDate }) { day ->
                DayItem(
                    day = day,
                    modifier = Modifier,
                    onClicked = { onItemClicked(day.startDate) }
                )

    }
}

@Composable
fun DayItem(
    day: Day, modifier: Modifier = Modifier, onClicked: () -> Unit = {}
) {
    ElevatedCard(
        onClick = onClicked, modifier = modifier
    ) {
        if (day.actions.isEmpty())
            NewDayComponent()
        else
            Column(
                modifier = modifier.padding(dimensionResource(id = R.dimen.margin_large)),
                verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.margin_medium))
            ) {
                day.feelingDuration.keys.toList().forEach { item ->
                    Row(
                        modifier = Modifier,
                        verticalAlignment = Alignment.CenterVertically,
                        horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.margin_small))
                    ) {
                        Box(
                            modifier = modifier
                                .size(
                                    dimensionResource(id = R.dimen.icon_width),
                                    dimensionResource(id = R.dimen.icon_height)
                                )
                                .clip(RoundedCornerShape(dimensionResource(id = R.dimen.margin_small)))
                                .background(FeelingTypeColors[item] ?: Color.Gray)
                        )
                        Text(
                            text = day.getTypeDurationLabel(LocalContext.current, item)
                        )
                    }

                }
            }
    }
}

@Composable
fun NewDayComponent(modifier: Modifier = Modifier, onClicked: () -> Unit = {}) {
        Box(modifier = modifier.fillMaxSize()
            .clickable { onClicked() }
            .background(MaterialTheme.colorScheme.primary)) {
            Image(
                imageVector = Icons.Filled.Add,
                contentDescription = "Add Actions",
                modifier = Modifier.align(Alignment.Center)
            )
        }
}

解决方法 #

要让网格所有子项高度统一，需确保每个层级的Composable都正确填充可用空间，具体修改如下：

1. 给DayItem添加fillMaxHeight()
   给传递给DayItem的Modifier加上fillMaxHeight()，强制Card占满网格分配的高度：

   DayItem(
       day = day,
       modifier = Modifier.fillMaxHeight(),
       onClicked = { onItemClicked(day.startDate) }
   )
   

2. 给ElevatedCard添加fillMaxSize()
   确保Card本身填充父级分配的全部空间：

   ElevatedCard(
       onClick = onClicked,
       modifier = modifier.fillMaxSize()
   ) { ... }
   

3. 传递Modifier给NewDayComponent
   调用NewDayComponent时传入fillMaxSize()的Modifier，让内部Box占满Card高度：

   if (day.actions.isEmpty())
       NewDayComponent(modifier = modifier.fillMaxSize())
   else
       ...
   

4. 给有内容的Column添加fillMaxHeight()
   当day存在actions时，Column默认是包裹内容高度，需设置fillMaxHeight()让它占满Card高度：

   Column(
       modifier = modifier
           .fillMaxHeight()
           .padding(dimensionResource(id = R.dimen.margin_large)),
       verticalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.margin_medium))
   ) { ... }
   

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