如何在SwiftUI Grid中垂直合并单元格？

SwiftUI 原生Grid组件目前没有提供类似.gridCellColumns的.gridCellRows行合并修饰符，要实现第一行和第二行第一个红色单元格的垂直合并，可以通过嵌套Grid + 单元格垂直自适应的方式来实现，具体代码修改如下：

import SwiftUI

struct ContentView: View {
    var body: some View {
        Grid() {
            GridRow {
                // 垂直合并两行的红色单元格
                Color.red
                    .gridCellUnsizedAxes([.vertical]) // 取消垂直方向的尺寸限制，让单元格高度匹配右侧内容
                // 右侧用嵌套Grid承载原有的两行布局
                Grid {
                    GridRow {
                        Color.green
                            .gridCellColumns(2)
                    }
                    GridRow {
                        Color.blue
                        Color.yellow
                    }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

实现逻辑说明 #

• 使用.gridCellUnsizedAxes([.vertical])修饰红色单元格，使其在垂直方向不被约束为单行高度，会自动拉伸以匹配同一GridRow内其他元素的总高度
• 将原Grid中右侧的两行内容嵌套到一个子Grid中，放在同一个父GridRow内，这样红色单元格就能自然占据两行的高度，达到视觉上的垂直合并效果

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