Jetpack Compose LazyVerticalGrid 借助span策略实现全宽加载的方法

基础实现现状 #

开发中使用固定2列的LazyVerticalGrid组件渲染电影列表，基础实现代码如下：

LazyVerticalGrid(
    cells = GridCells.Fixed(2),
    content = {
        items(moviePagingItems.itemCount) { index ->
            val movie = moviePagingItems[index] ?: return@items
            MovieItem(movie, Modifier.preferredHeight(320.dp))
        }
        renderLoading(moviePagingItems.loadState)
    }
)

之前的尝试与遇到的问题 #

原本计划借助LazyGridScope提供的fillParentMaxSize修饰符，实现整行全宽的加载提示效果，为此封装了如下的加载状态渲染逻辑：

fun LazyGridScope.renderLoading(loadState: CombinedLoadStates) {
  when {
    loadState.refresh is LoadState.Loading -> {
        item {
            LoadingColumn("Fetching movies", Modifier.fillParentMaxSize())
        }
    }
    loadState.append is LoadState.Loading -> {
        item {
            LoadingRow(title = "Fetching more movies")
        }
    }
  }
}

但由于当前网格为固定2列配置，上述方式渲染的加载提示仅能占据单格的半屏宽度，无法实现整行全宽展示，对应问题效果如下图：

实现方案 #

完全可以通过LazyVerticalGrid的跨列span策略，实现加载视图占满整行全宽的效果，不需要调整原有网格的整体布局结构，仅需在添加加载类item时，通过span配置让该item占满整行的全部列数即可：

• 固定2列的网格场景下，普通列表item默认仅占用1个span槽位，只要给加载类item配置对应跨列span，就能横跨整行展示
• 调整原有renderLoading的封装逻辑，为每个加载item配置全跨列的span：

  fun LazyGridScope.renderLoading(loadState: CombinedLoadStates) {
    when {
      loadState.refresh is LoadState.Loading -> {
          // 为刷新加载项配置占满整行的span
          item(
              span = { GridItemSpan(maxLineSpan) }
          ) {
              // 此时fillParentMaxSize将真正匹配整行的最大宽度
              LoadingColumn("Fetching movies", Modifier.fillParentMaxSize())
          }
      }
      loadState.append is LoadState.Loading -> {
          // 为加载更多项同样配置全跨列span
          item(
              span = { GridItemSpan(maxLineSpan) }
          ) {
              LoadingRow(title = "Fetching more movies")
          }
      }
    }
  }
  

注：maxLineSpan是LazyGridItemSpanScope内置的属性，会自动适配当前网格的总列数，无需硬编码列数数值；后续如果调整网格的列数配置，这段跨列逻辑不需要改动，依然可以自动实现整行全宽的展示效果。

内容的提问来源于stack exchange，提问作者Yasin Kaçmaz