SwiftUI — Grid

在 SwiftUI 中，Grid 是一种用于创建灵活布局的容器，允许你以行和列的形式排列视图。Grid 提供了强大的布局能力，特别适合需要复杂排列的场景。

基本概念 #

Grid：一个容器，用于定义行和列的布局。
GridRow：用于定义一行中的视图。
GridCell：每个视图在 Grid 中占据的单元格。

基本用法 #

创建 Grid：使用 Grid 容器包裹你的内容。
定义 GridRow：在 Grid 中使用 GridRow 来定义每一行的内容。
添加视图：在 GridRow 中添加视图，每个视图会自动占据一个单元格。

示例代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("A")
                Text("B")
                Text("C")
            }
            GridRow {
                Text("D")
                Text("E")
                Text("F")
            }
            GridRow {
                Text("G")
                Text("H")
                Text("I")
            }
        }
        .padding()
    }
}

自定义列宽和行高 #

你可以通过 GridColumn 和 GridRow 的初始化参数来自定义列宽和行高。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("A")
                    .frame(width: 50, height: 50)
                Text("B")
                    .frame(width: 100, height: 50)
                Text("C")
                    .frame(width: 150, height: 50)
            }
            GridRow {
                Text("D")
                    .frame(width: 50, height: 100)
                Text("E")
                    .frame(width: 100, height: 100)
                Text("F")
                    .frame(width: 150, height: 100)
            }
        }
        .padding()
    }
}

跨行和跨列 #

你可以使用 gridCellColumns(_:) 和 gridCellRows(_:) 修饰符来实现跨列和跨行。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("A")
                    .gridCellColumns(2) // 跨两列
                Text("B")
            }
            GridRow {
                Text("C")
                Text("D")
                    .gridCellRows(2) // 跨两行
            }
            GridRow {
                Text("E")
                Text("F")
            }
        }
        .padding()
    }
}

对齐方式 #

你可以使用 gridColumnAlignment(_:) 和 gridRowAlignment(_:) 来设置列和行的对齐方式。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Grid(alignment: .leading) {
            GridRow {
                Text("A")
                Text("B")
            }
            GridRow {
                Text("C")
                Text("D")
            }
        }
        .padding()
    }
}

总结 #

Grid 是 SwiftUI 中非常强大的布局工具，适用于需要复杂排列的场景。通过 GridRow 和 GridCell，你可以轻松地创建灵活的布局，并且可以通过各种修饰符来自定义列宽、行高、跨行、跨列以及对齐方式。