如何修改LazyVerticalGrid的填充顺序为列优先排列？

默认情况下，列数为3的LazyVerticalGrid会按行优先顺序填充元素，排列效果如下：

1 2 3
4 5 6
7 8 9

要改成列优先（从上到下填充每一列，再切换到下一列）的排列，实现如下效果：

1 4 7
2 5 8
3 6 9

核心思路 #

LazyVerticalGrid本身只支持行优先布局，所以我们需要通过索引映射，把原始行优先的元素顺序重新映射到列优先的布局位置上——给LazyVerticalGrid的每个布局位置（行优先顺序）找到对应的原始元素即可。

实现步骤 #

1. 计算总行数：根据元素总数和列数，向上取整得到总行数，公式为 rows = (totalItems + columns - 1) / columns
2. 索引映射：对每个布局位置索引pos，计算对应的原始元素索引：(pos % rows) * columns + (pos / rows)

代码示例 #

import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun ColumnPriorityLazyGrid() {
    val items = (1..9).toList()
    val columns = 3
    val totalItems = items.size
    val rows = (totalItems + columns - 1) / columns // 向上取整计算总行数

    LazyVerticalGrid(columns = GridCells.Fixed(columns)) {
        // 按布局位置的行优先顺序遍历，每个位置映射到对应的原始元素
        items(totalItems) { pos ->
            // 计算当前布局位置对应的原始元素索引
            val originalIndex = (pos % rows) * columns + (pos / rows)
            val item = items[originalIndex]
            
            // 元素UI布局示例
            Text(text = item.toString())
        }
    }
}

逻辑验证 #

以3列9个元素为例：

• 布局位置pos=0（第1行第1列）：(0%3)*3 + 0/3 = 0 → 对应原始元素1
• 布局位置pos=1（第1行第2列）：(1%3)*3 +1/3=3 → 对应原始元素4
• 布局位置pos=2（第1行第3列）：(2%3)*3+2/3=6 → 对应原始元素7
• 以此类推，最终就能实现列优先的排列效果。

内容的提问来源于stack exchange，提问作者Yarh