如何让Jetpack Compose的LazyVerticalGrid从中心开始填充项？

要让网格项整体在屏幕水平和垂直方向居中，你需要调整网格的尺寸约束和父容器的设置，以下是修改后的实现代码：

@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
private fun ModuleGrid() {
    val modules = ModuleRegistry.getModulesList().toMutableList()
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        LazyVerticalGrid(
            modifier = Modifier.wrapContentSize(),
            columns = GridCells.Adaptive(minSize = 96.dp),
            horizontalArrangement = Arrangement.Center,
            verticalArrangement = Arrangement.spacedBy(8.dp),
            contentPadding = PaddingValues(8.dp)
        ) {
            items(modules, key = { it.namedTag }) { module ->
                Card(
                    colors = CardDefaults.cardColors(containerColor = Color.Transparent),
                    modifier = Modifier
                        .size(120.dp)
                        .clickable { launchModule(module) }
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        module.displayIcon?.let { icon ->
                            Image(
                                painter = painterResource(id = icon),
                                contentDescription = module.displayName,
                                contentScale = ContentScale.Fit,
                                modifier = Modifier
                                    .size(96.dp)
                                    .padding(4.dp)
                            )
                        }
                        Text(text = module.displayName)
                    }
                }
            }
        }
    }
}

关键修改说明： #

1. 父容器Box设置：给Box添加Modifier.fillMaxSize()，确保它占满整个屏幕空间，配合contentAlignment = Alignment.Center实现子元素的全局居中。
2. 网格尺寸调整：将LazyVerticalGrid的modifier改为wrapContentSize()，让网格仅占用刚好容纳所有项的空间，而非占满屏幕高度，这样Box能将整个网格居中。
3. 项间距与内边距：添加verticalArrangement = Arrangement.spacedBy(8.dp)设置垂直项间距，contentPadding = PaddingValues(8.dp)给网格添加内边距，优化视觉布局。
4. 简化子元素对齐：利用Column的horizontalAlignment = Alignment.CenterHorizontally，去掉Image和Text上重复的align修饰符，代码更简洁。

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