Compose LazyHorizontalGrid 中的子项自适应高度实现指南

2024-03-03 00:43:17

在 Compose LazyHorizontalGrid 中实现子项的 Wrap Content 行为

在 Compose 中构建界面时，常常需要使用 LazyHorizontalGrid 组件来显示水平排列的内容。然而，默认情况下，LazyHorizontalGrid 会强制其子项的高度填充剩余空间，这在某些情况下是不希望的，比如需要子项根据其内容自动调整高度时。

问题

假设我们有一个包含卡片的 LazyHorizontalGrid 布局，并且希望卡片根据其内容自动调整高度。但是，由于 LazyHorizontalGrid 的默认行为，卡片的高度会被强制填充 LazyHorizontalGrid 的剩余高度，导致所有卡片具有相同的高度。

解决方法

为了实现子项的 Wrap Content 行为，需要对 LazyHorizontalGrid 和其子项应用以下修改：

调整行数：
删除 GridCells.Fixed(2)，改为 GridCells.Adaptive(minSpanCount = 2)。这将允许 LazyHorizontalGrid 根据内容自动调整行数。
约束子项宽度：
为每个子项添加 Modifier.width(IntrinsicSize.Min) 约束，允许子项根据其内容自动调整宽度。
调整子项高度：
为每个子项添加 Modifier.height(IntrinsicSize.Max) 约束，允许子项根据其内容自动调整高度。

代码示例

LazyHorizontalGrid(
    rows = GridCells.Adaptive(minSpanCount = 2),
    contentPadding = PaddingValues(horizontal = 16.dp),
    modifier = Modifier
        .fillMaxWidth()
) {
    items(5) {
        Card(
            modifier = Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Max)
        ) {
            // 子项内容
        }
    }
}