如何用SwiftUI Grid容器按列布局对象数组？

问题背景 #

我创建了一个对象数组：

let myObjects = [ theObject(name: "first", ...),
                  theObject(name: "second", ...), etc.
]

希望用SwiftUI的Grid容器以2列布局展示内容，但GridRow需要每行包含多个数组元素，直接用ForEach遍历很棘手，比如硬写的方式：

GridRow {
    Text(myObjects[i].name)
    Text(myObjects[i+1].name)
}
GridRow {
    ... etc
}

我目前有三个思路，但都有顾虑：

• 不使用Grid：改用LazyVGrid逐个枚举布局，但更偏好Grid的控制精度。
• 修改模型：让每个对象承载两组信息：

let myObjects = [ theObject(firstName: "first", secondName: "second", ...),
                  theObject(firstName: "third", secondName: "fourth", ...), etc.
]

但这种设计不合理，后续改3列布局会更麻烦。

• 使用索引指针：通过整数索引遍历：

ForEach(0...((myObjects.count - 1) / 2), id: \.self) { i in
    GridRow {
        Text(myObjects[i*2].name)
        if (i*2) < myObjects.count - 1 { // 处理奇数个元素的情况
            Text(myObjects[(i*2) + 1].name)
        }
    }
}

这种方式繁琐，且无法适配列数变更的场景。

想请教：还有哪些实现技巧？上述思路是否可行？

解答 #

现有思路的可行性分析 #

1. 改用LazyVGrid：完全可行，如果你能接受它的布局逻辑（基于GridItem的灵活配置），但确实失去了Grid那种类似表格的精确行列控制能力，适合追求快速布局且对行列精细控制要求不高的场景。
2. 修改模型：不推荐，模型应该贴合业务逻辑，为了布局强行修改数据结构会导致耦合严重，后续列数变化时需要重构模型，维护成本极高。
3. 索引指针遍历：可行但不够优雅，硬编码列数（2列）导致扩展性差，而且索引计算容易出错，适合临时快速实现但不适合长期维护的场景。

更优的实现技巧 #

1. 数组分组扩展（通用列数适配）

给Array写一个扩展，将数组按指定列数分成子数组，每个子数组对应一行的元素，这样就能用ForEach遍历分组后的数组，每行生成对应的GridRow：

extension Array {
    func chunked(into columns: Int) -> [[Element]] {
        stride(from: 0, to: count, by: columns).map {
            Array(self[$0..<Swift.min($0 + columns, count)])
        }
    }
}

使用方式：

let columnCount = 2 // 后续改3列只需修改这个值
Grid {
    ForEach(myObjects.chunked(into: columnCount), id: \.self) { rowItems in
        GridRow {
            ForEach(rowItems) { item in
                Text(item.name)
            }
            // 可选：如果需要补全空白单元格（比如奇数个元素时让行保持2列宽度）
            if rowItems.count < columnCount {
                ForEach(0..<(columnCount - rowItems.count)) { _ in
                    Text("") // 空白占位
                }
            }
        }
    }
}

这种方式完全适配任意列数，代码简洁，且不需要修改原模型，是最通用的方案。

2. 使用Grid的自动布局+ForEach嵌套

如果不需要严格的行对齐，也可以直接在Grid里嵌套ForEach，利用Grid的自动换行特性（保留Grid的部分控制能力）：

Grid(alignment: .leading) {
    ForEach(myObjects) { item in
        Text(item.name)
            .gridColumnAlignment(.leading)
    }
}
.gridColumns(2) // iOS 16+ 支持直接设置列数

这个方法非常简洁，gridColumns(_:)直接指定列数，Grid会自动将元素按顺序填充到对应列并换行，不需要手动处理分组。注意该API仅iOS 16.0+可用，若需特殊行样式需额外调整。

3. 自定义GridRow生成器

如果需要更复杂的行逻辑，可以封装一个生成GridRow的辅助函数，传入每行的元素数组统一处理布局：

func makeGridRow(for items: [theObject], columnCount: Int) -> GridRow {
    GridRow {
        ForEach(items) { item in
            Text(item.name)
                .frame(maxWidth: .infinity) // 让单元格占满宽度
        }
        // 补全空白单元格
        if items.count < columnCount {
            Spacer()
            // 或者生成对应数量的空白Text
        }
    }
}

使用时配合分组扩展：

Grid {
    ForEach(myObjects.chunked(into: 2), id: \.self) { rowItems in
        makeGridRow(for: rowItems, columnCount: 2)
    }
}

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