New SwiftUI - WWDC22- Grids

Apple Developer Documentation

Multicolumn cells

基本の形

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("Hello")
                Image(systemName: "globe")
            }
            GridRow {
                Image(systemName: "hand.wave")
                Text("World")
            }
        }
    }
}

表示すると

Grid {
    GridRow {
        Text("Hello")
        Image(systemName: "globe")
    }
    Divider()
    GridRow {
        Image(systemName: "hand.wave")
        Text("World")
    }
}

Divider()

を追加して実行

真ん中で分かれて、水平方向に広がっています。

Divider()
　.gridCellUnsizedAxes(.horizontal)

とすることで

Column count

Grid {
    GridRow {
        Text("Row 1")
        ForEach(0..<2) { _ in Color.red }
    }
    GridRow {
        Text("Row 2")
        ForEach(0..<5) { _ in Color.green }
    }
    GridRow {
        Text("Row 3")
        ForEach(0..<4) { _ in Color.blue }
    }
}.frame(width:400,height: 200)

実行すると

Playgroundsで実行する場合は

.frame(width:400,height: 200)

とモディファイアをつけてやると見栄えが良くなります。

Grid(alignment: .bottom, horizontalSpacing: 1, verticalSpacing: 1)

とすることにより

間隔を調整できます。