3

在 xml 中，您可以在 GridLayoutManager 中使用 GridLayoutManager.SpanSizeLookup 设置单个项目的跨度大小（该项目将在行中使用多少列，例如，在 3 列的网格中，我可以将第一项设置为跨度大小3 所以它将使用网格的所有宽度），但是在 Compose 中我找不到这样做的方法，垂直网格只有一种设置全局跨度计数和添加项目的方法，但没有设置跨度大小一个单独的项目，有没有办法做到这一点？

4

3 回答 3

2

目前没有开箱即用的支持。我现在解决这个问题的方法是使用 aLazyColumn然后项目是Rows 并且在每个项目中Row你可以决定一个项目的宽度，使用weight.

我已经实现，在我的情况下，我有标题（全宽）和等宽项目的单元格（根据屏幕的宽度，每行可能有 1、2 或 3 个单元格）。这是一种解决方法，但在获得本机支持之前，VerticalGrid这是一种选择。

我的解决方案在这里- 寻找LazyListScope扩展。

于 2021-09-30T02:54:22.780 回答
1

Jetpack Compose 版本1.1.0-beta03将水平跨度引入LazyVerticalGrid.

示例代码：

val list by remember { mutableStateOf(listOf("A", "E", "I", "O", "U")) }

LazyVerticalGrid(
    cells = GridCells.Fixed(2)
) {
    // Spanned Item:
    item(
        span = {
            // Replace "maxCurrentLineSpan" with the number of spans this item should take.
            // Use "maxCurrentLineSpan" if you want to take full width.
            GridItemSpan(maxCurrentLineSpan)
        }
    ) {
        Text("Vowels")
    }

    // Other items:
    items(list) { item ->
        Text(item)
    }
}
于 2022-02-03T18:06:04.957 回答
0

从答案中调整代码，我创建了一个更“通用”的方法，它可以与 Adaptive 和 Fixed 一起使用，我对 Compose 很陌生，所以我接受建议

@Composable
fun HeaderGrid(cells: GridCells, content: HeaderGridScope.() -> Unit) {
    var columns = 1
    var minColumnWidth = 0.dp
    when (cells) {
        is GridCells.Fixed -> {
            columns = cells.count
            minColumnWidth = cells.minSize
        }
        is GridCells.Adaptive -> {
            val width = LocalContext.current.resources.displayMetrics.widthPixels
            val columnWidthPx = with(LocalDensity.current) { cells.minSize.toPx() }
            minColumnWidth = cells.minSize
            columns = ((width / columnWidthPx).toInt()).coerceAtLeast(1)
        }
    }
    LazyColumn(modifier = Modifier.fillMaxWidth()){
        content(HeaderGridScope(columns, minColumnWidth, this))
    }
}

fun <T>HeaderGridScope.gridItems(items: List<T>, content: @Composable (T) -> Unit) {
    items.chunked(numColumn).forEach {
        listScope.item {
            Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                it.forEach { 
                    content(it)
                }
                if (it.size < numColumn) {
                    repeat(numColumn - it.size) {
                        Spacer(modifier = Modifier.width(columnWidth))
                    }
                }
            }
        }
    }
}

fun HeaderGridScope.header(content: @Composable BoxScope.() -> Unit) {
    listScope.item {
        Box(
            modifier = Modifier
                .fillMaxWidth(),
           content = content
        )
    }
}

data class HeaderGridScope(val numColumn: Int, val columnWidth: Dp, val listScope: LazyListScope)

sealed class GridCells {
    class Fixed(val count: Int, val minSize: Dp) : GridCells()
    class Adaptive(val minSize: Dp) : GridCells()
}
于 2021-10-01T23:44:37.197 回答