Jetpack Compose 的 LazyVerticalGrid 有跨度策略吗

Question

我有一个有 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我正在尝试使用s修饰符显示全角加载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 个单元格，因此加载会占据屏幕的一半。像这样：

有没有办法让我的加载视图占据全宽？

Answer 1

Jetpack Compose1.1.0-beta03版本包括对LazyVerticalGrid.

这是示例用法：

private const val CELL_COUNT = 2

private val span: (LazyGridItemSpanScope) -> GridItemSpan = { GridItemSpan(CELL_COUNT) }

LazyVerticalGrid(
    cells = GridCells.Fixed(CELL_COUNT),
    content = {
        items(moviePagingItems.itemCount) { index ->
            val movie = moviePagingItems.peek(index) ?: return@items
            Movie(movie)
        }
        renderLoading(moviePagingItems.loadState)
    }
}

private fun LazyGridScope.renderLoading(loadState: CombinedLoadStates) {
    if (loadState.append !is LoadState.Loading) return

    item(span = span) {
        val title = stringResource(R.string.fetching_more_movies)
        LoadingRow(title = title)
    }
}

此答案的代码示例可以在以下位置找到：Jetflix/MoviesGrid.kt

Answer 2

LazyVerticalGriditems()具有内置的跨度策略itemsIndexed()

@Composable
fun SpanLazyVerticalGrid(cols: Int, itemList: List<String>) {
    val lazyGridState = rememberLazyGridState()
    LazyVerticalGrid(
            columns = GridCells.Fixed(cols),
            state = lazyGridState
    ) {
        items(itemList, span = { item ->
            val lowercase = item.lowercase()
            val span = if (lowercase.startsWith("a") || lowercase.lowercase().startsWith("b") || lowercase.lowercase().startsWith("d")) {
                cols
            }
            else {
                1
            }
            GridItemSpan(span)
        }) { item ->
            Box(modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
                    .padding(10.dp)
                    .background(Color.Black)
                    .padding(2.dp)
                    .background(Color.White)
            ) {
                Text(
                        modifier = Modifier.align(Alignment.Center),
                        text = item,
                        fontSize = 18.sp
                )
            }
        }
    }
}

'

val names = listOf("Alice", "Bob", "Cindy", "Doug", "Ernie", "Fred", "George", "Harris")
SpanLazyVerticalGrid(
        cols = 3,
        itemList = names
)