Jetpack Compose 中的延遲滾動

Question

從 Jetpack Compose 開始，Recycler 類型的視圖稱為 Lazy。

目前，只有 Lazy Row 和 Lazy Column。

我有一個可滾動的交錯網格自定義組合。 但是有沒有辦法讓它變得懶惰？ 還是這樣的 API 還不穩定？

Answer 1

您可以通過多種方式實現相同的效果，其中之一是：

@Composable
fun StaggeredVerticalGrid(
    modifier: Modifier = Modifier,
    maxColumnWidth: Dp,
    children: @Composable () -> Unit
) {
    Layout(
        children = children,
        modifier = modifier
    ) { measurables, constraints ->
        check(constraints.hasBoundedWidth) {
            "Unbounded width not supported"
        }
        val columns = ceil(constraints.maxWidth / maxColumnWidth.toPx()).toInt()
        val columnWidth = constraints.maxWidth / columns
        val itemConstraints = constraints.copy(maxWidth = columnWidth)
        val colHeights = IntArray(columns) { 0 } // track each column's height
        val placeables = measurables.map { measurable ->
            val column = shortestColumn(colHeights)
            val placeable = measurable.measure(itemConstraints)
            colHeights[column] += placeable.height
            placeable
        }

        val height = colHeights.maxOrNull()?.coerceIn(constraints.minHeight, constraints.maxHeight)
            ?: constraints.minHeight
        layout(
            width = constraints.maxWidth,
            height = height
        ) {
            val colY = IntArray(columns) { 0 }
            placeables.forEach { placeable ->
                val column = shortestColumn(colY)
                placeable.place(
                    x = columnWidth * column,
                    y = colY[column]
                )
                colY[column] += placeable.height
            }
        }
    }
}

private fun shortestColumn(colHeights: IntArray): Int {
    var minHeight = Int.MAX_VALUE
    var column = 0
    colHeights.forEachIndexed { index, height ->
        if (height < minHeight) {
            minHeight = height
            column = index
        }
    }
    return column
}

從Owl 示例應用程序中提取，不要忘記在ScrollableColumn包裝/調用這個 Composable 。

編輯：隨着 compose 1.0.0-alpha09 的發布，現在你有了官方的LazyVerticalGrid ，查看發行說明

Answer 2

如果您正在實施自定義交錯網格，我會說您改為實施交錯行。 然后創建另一個 Composable 來接收數據並在交錯的行中提供它，同時在內部為每行使用一個惰性列。 我不是要你實施新的東西。 只需稍微調整現有的實現，這將是一個巨大的性能提升。

另外，如果你的數據不夠大，不使用惰性容器也是可以的。