Jetpack Compose 中具有等高行的网格布局

Question

喷气背包组成：

我想创建一个像 UI 一样具有相同高度行的网格布局，但我找不到用于获取当前可用屏幕尺寸的函数（应用程序应该看起来像那样）

结果应该是这样的：

看看上面提到的链接

我尝试过的：

我尝试在LazyVerticalGridModifier.fillMaxHeight()内部使用来生成相同大小的行，但它不起作用。除此之外，我还有手动设置每个行项目高度的想法，但我找不到在 jetpack compose 中获取可用屏幕尺寸的函数（然后我将屏幕高度除以行数） ）。

val numbers = (0..34).toList()

LazyVerticalGrid(
    cells = GridCells.Fixed(7)

) {
    items(numbers.count()) {
        Column(horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "#"+numbers.get(it))
        }
    }
}

Answer 1

您可以使用aspectRatio修饰符：

LazyVerticalGrid(
    columns = GridCells.Adaptive(100.dp),
) {
    items(100) {
        Box(
            modifier = Modifier.aspectRatio(1f)
        ) { }
    }
}

完整示例：

@Composable
fun Body(modifier: Modifier) {
    Column (
        modifier = modifier,
    ) {
        Text(
            text = "Without aspect ratio",
            modifier = Modifier.padding(12.dp),
            style = MaterialTheme.typography.h5,
        )
        LazyVerticalGrid(
            columns = GridCells.Adaptive(100.dp),
            modifier = Modifier.weight(1f),
        ) {
            items(100) {
                Surface (
                    modifier = Modifier
                        .padding(12.dp),
                    color = Color(0xff2187bb),
                ) {
                    RandomSizeBox()
                }
            }
        }
        Divider()
        Text(
            "With aspect ratio",
            modifier = Modifier.padding(12.dp),
            style = MaterialTheme.typography.h5,
        )
        LazyVerticalGrid(
            columns = GridCells.Adaptive(100.dp),
            modifier = Modifier.weight(1f),
        ) {
            items(100) {
                Surface (
                    modifier = Modifier
                        .aspectRatio(1f)
                        .padding(12.dp),
                    color = Color(0xffbb2187),
                ) {
                    RandomSizeBox()
                }
            }
        }
    }
}

@Composable
fun RandomSizeBox() {
    Box(modifier = Modifier.height((10 + Math.random() * 90).dp))
}

Answer 2

还有另一种也许简单的方法可以做到这一点。您可以密切关注当前最高的项目，并相应地更新所有其他项目。这是一个例子：

var desiredItemMinHeight by remember {
  mutableStateOf(0.dp)
}

val density = LocalDensity.current

LazyVerticalGrid(
    modifier = Modifier.fillMaxSize(),
    columns = GridCells.Fixed(count = 2),
) {
        items(state.items) {
            ItemBox(
                modifier = Modifier
                    .onPlaced {
                        with(density) {
                            if (desiredItemMinHeight < it.size.height.toDp()) {
                                desiredItemMinHeight = it.size.height.toDp()
                            }
                        }
                    }
                    .defaultMinSize(minHeight = desiredItemMinHeight),
            )
        }
    }

Answer 3

对于它的价值，您可以通过以下方式测量屏幕高度：

val screenHeight = LocalConfiguration.current.screenHeightDp

但使用滚动修饰符使网格可滚动可能是值得的： https: //developer.android.com/jetpack/compose/gestures#scroll-modifiers