Jetpack Compose中LazyVerticalGrid自适应列时如何居中底部加载视图

当使用GridCells.Adaptive时，网格列数会根据屏幕宽度动态计算，无法通过硬编码列数来设置跨列显示。解决这个问题的核心是利用LazyGridItemSpanScope提供的maxLineSpan属性——它会自动返回当前网格的实际最大列数，适配固定列和自适应列两种场景。

修改步骤： #

1. 更新跨列规则
   把原来硬编码列数的span定义，替换为依赖maxLineSpan的动态规则：

   private val span: (LazyGridItemSpanScope) -> GridItemSpan = { GridItemSpan(it.maxLineSpan) }
   

2. 切换为自适应列配置
   将LazyVerticalGrid的columns参数改为自适应设置：

   columns = GridCells.Adaptive(minSize = 120.dp)
   

修改后的完整代码示例： #

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 120.dp),
    contentPadding = PaddingValues(
        start = Dimens.GridSpacing,
        end = Dimens.GridSpacing,
        bottom = WindowInsets.navigationBars.getBottom(LocalDensity.current)
            .toDp().dp.plus(Dimens.GridSpacing)
    ),
    horizontalArrangement = Arrangement.spacedBy(
        Dimens.GridSpacing,
        Alignment.CenterHorizontally
    ),
    content = {
        items(lazyTMDbItems.itemCount) { index ->
            val tmdbItem = lazyTMDbItems[index]
            tmdbItem?.let {
                TMDbItemContent(
                    it,
                    Modifier
                        .height(320.dp)
                        .padding(vertical = Dimens.GridSpacing),
                    onClick
                )
            }
        }

        lazyTMDbItems.apply {
            when (loadState.append) {
                is LoadState.Loading -> {
                    item(span = span) {
                        LoadingRow(modifier = Modifier.padding(vertical = Dimens.GridSpacing))
                    }
                }
                is LoadState.Error -> {
                    val message = (loadState.append as? LoadState.Error)?.error?.message ?: return@apply
                    item(span = span) {
                        ErrorScreen(
                            message = message,
                            modifier = Modifier.padding(vertical = Dimens.GridSpacing),
                            refresh = { retry() }
                        )
                    }
                }
                else -> {}
            }
        }
    }
)

原理说明： #

maxLineSpan会实时获取当前网格布局的实际列数，无论是固定列还是自适应计算出的列数都能适配。通过让加载/错误视图跨所有列显示，再配合视图自身的居中布局（比如LoadingRow内部使用Modifier.fillMaxWidth().wrapContentSize(Alignment.Center)），就能实现底部居中的效果。

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