如何在 compose 中实现 LazyHorizontalGrid 内项目的 wrap_content 行为？

Question

我正在构建一个 compose 布局，其中包含一个带有 2 行卡片的 LazyHorizontalGrid，比方说：

LazyHorizontalGrid(
    rows = GridCells.Fixed(2),
    contentPadding = PaddingValues(horizontal = 16.dp),
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(2F) //Workaround that I found to try to limit LazyHorizontalGrid Height
) {
    item(5){
        Card {
            Column {
                Text(text = stringResource(id = R.string.item_title))
                Spacer(modifier = Modifier.height(12.dp))
                Image(painter = painterResource(id = R.drawable.item_image), contentDescription = null )
            }
        }
    }
}

当我将其修复为 2 行时，LazyHorizontalGrid 将项目高度更改为屏幕剩余高度的一半。换句话说，它填满了所有剩余的高度。

我设置了一个纵横比来尝试限制我的项目的高度（通过限制 LazyHorizontalGrid 本身的高度）。 LazyHorizontalGrid 下面还会有其他元素。

如何在 LazyHorizontalGrid 内实现项目高度的“wrap_content”行为？

我尝试过的事情：

• 使用

  GridCells.FixedSize()

  - 我不能。无论屏幕大小如何，我都需要两行
• 用户

  verticalArrangement

  对于

  LazyHorizontalGrid

  - 完全没有区别
• 在

  Modifier.wrapContentHeight()

  可组合项中添加

  Card's

  - 完全没有区别

Answer 1

我看到您正在尝试实现具有两行的 LazyHorizontalGrid，并且您已经到达此屏幕，

使用 LazyHorizontalGrid 填充整个页面。 要限制每个项目的高度，请将

.wrapContentHeight()

设置为

Card

，这将使视图如下，

如果您尝试在 LazyHorizontalGrid 下面添加其他元素，则应该将 LazyHorizontalGrid 包装在容器中并设置

.weight(1f)

。这将使 LazyHorizontalGrid 占据剩余的可用空间，例如，

这是实现，

    Column {
        LazyHorizontalGrid(
            rows = GridCells.Fixed(2),
            contentPadding = PaddingValues(horizontal = 16.dp),
            modifier = modifier.weight(1f)
        ) {
            (0..10).forEach {
                item(it) {
                    Card(
                        modifier = modifier
                            .padding(10.dp)
                            .wrapContentHeight()
                    ) {
                        Column {
                            Text(
                                modifier = modifier.padding(10.dp),
                                text = "title"
                            )
                            Image(
                                painter = painterResource(id = R.drawable.ic_launcher_foreground),
                                contentDescription = null
                            )
                        }
                    }
                }
            }
        }

        Box(
            modifier = modifier
                .background(color = Color.Green)
                .fillMaxWidth()
                .fillMaxHeight(.5f)
        ) {
            Text(
                modifier = modifier.align(Alignment.Center),
                text = "other elements below the LazyHorizontalGrid"
            )
        }
    }