当项目之间存在垂直空间时，LazyHorizontalGrid 高度如何计算？

Question

作为 Compose 中的基本布局 Codelab 的一部分，我们将指定以下代码来满足这些设计条件：

• 网格的水平 contentPadding 为 16.dp。
• 水平和垂直排列间隔16.dp。
• 网格高度为168.dp。
• FavoriteCollectionCard 的修饰符指定高度为 80.dp。

实现它们的代码如下：

@Composable
fun FavoriteCollectionsGrid(
    modifier: Modifier = Modifier,
) {
    LazyHorizontalGrid(
        rows = GridCells.Fixed(2),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        contentPadding = PaddingValues(horizontal = 16.dp),
        modifier = modifier.height(168.dp),
    ) {
        items(favoriteCollectionsData) { (drawable, text) ->
            FavoriteCollectionCard(
                drawable = drawable,
                text = text,
                modifier = Modifier.height(80.dp)
            )
        }
    }
}

我的问题是网格的高度和项目之间的垂直空间是多少？

由于卡片的高度和垂直空间的总和大于网格的高度：

2单元*卡片高度+垂直间距=2*80+16=176>168指定网格高度

那么要么网格高度为176，要么垂直间距为8。

Answer 1

在使用布局检查器调查情况后，我意识到 LazyHorizontalGrid 的高度为 168，但每个卡片项的高度为 76，以实现卡片之间 16 dp 的垂直空间。

每个单元格的高度=（网格高度-垂直空间）/单元格数量

76 = (168 - 16) / 2

总而言之，LazyHorizontalGrid 保存客户端指定的属性，并将项目放置在剩余空间中。