【发布时间】：2022-08-23 14:21:35
【问题描述】：
android (https://developer.android.com/topic/libraries/architecture/paging/v3-overview) 给出的分页与 Column,Row,lazy column,lazy rows 一起工作得很好。当我尝试在交错布局中实现分页时会出现问题（答案How to achieve a staggered grid layout using Jetpack compose? 非常有帮助）。
问题陈述是当我滚动到列表底部时没有进一步的网络调用。根据文档，没有方法可以对下一个项目进行分页调用，只要我们将输入列表设置为 itemList.collectAsLazyPagingItems() 并将其传递给lazycolumn/lazyrow，它就会自动执行。但对于上述交错布局，它不会自动发生。
我正在测试的一种解决方案是手动观察可见项目的索引，以及它们是否接近列表末尾并手动调用网络请求。 （请参阅此代码实验室的起始代码 (https://developer.android.com/codelabs/android-paging#0)
交错布局的本质是在内部创建和使用多个 COLUMNS 并将项目分配给它们的列。这里的挑战是我们如何知道我们正在接近列表的末尾。
交错布局的代码是这样的（我不完全理解这是如何工作的）
@Composable
private fun CustomStaggeredVerticalGrid(
// on below line we are specifying
// parameters as modifier, num of columns
modifier: Modifier = Modifier,
numColumns: Int = 2,
content: @Composable () -> Unit
) {
// inside this grid we are creating
// a layout on below line.
Layout(
// on below line we are specifying
// content for our layout.
content = content,
// on below line we are adding modifier.
modifier = modifier
) { measurable, constraints ->
// on below line we are creating a variable for our column width.
val columnWidth = (constraints.maxWidth / numColumns)
// on the below line we are creating and initializing our items
constraint widget.
val itemConstraints = constraints.copy(maxWidth = columnWidth)
// on below line we are creating and initializing our column height
val columnHeights = IntArray(numColumns) { 0 }
// on below line we are creating and initializing placebles
val placeables = measurable.map { measurable ->
// inside placeble we are creating
// variables as column and placebles.
val column = testColumn(columnHeights)
val placeable = measurable.measure(itemConstraints)
// on below line we are increasing our column height/
columnHeights[column] += placeable.height
placeable
}
// on below line we are creating a variable for
// our height and specifying height for it.
val height =
columnHeights.maxOrNull()?.coerceIn(constraints.minHeight,
constraints.maxHeight)
?: constraints.minHeight
// on below line we are specifying height and width for our layout.
layout(
width = constraints.maxWidth,
height = height
) {
// on below line we are creating a variable for column y pointer.
val columnYPointers = IntArray(numColumns) { 0 }
// on below line we are setting x and y for each placeable item
placeables.forEach { placeable ->
// on below line we are calling test
// column method to get our column index
val column = testColumn(columnYPointers)
placeable.place(
x = columnWidth * column,
y = columnYPointers[column]
)
// on below line we are setting
// column y pointer and incrementing it.
columnYPointers[column] += placeable.height
}
}
}
}
调用上面的代码如下
Column(
// for this column we are adding a
// modifier to it to fill max size.
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.then(layoutModifier)
) {
// on below line we are creating a column
// for each item of our staggered grid.
CustomStaggeredVerticalGrid(
// on below line we are specifying
// number of columns for our grid view.
numColumns = numColumns,
) {
// inside staggered grid view we are
// adding images for each item of grid.
itemList.forEachIndexed { index, singleItem ->
// on below line inside our grid
// item we are adding card.
SomesingleItemCompose(singleItem , singleItemModifier ,index) // this one single grid item Ui as per requirement
}
}
}
标签： android pagination android-jetpack-compose