![見出し画像](https://assets.st-note.com/production/uploads/images/81692121/rectangle_large_type_2_e10ed11b44fa440ad92d6f70cdec574c.png?width=800)
New SwiftUI - WWDC22- Grids
Multicolumn cells
基本の形
struct ContentView: View {
var body: some View {
Grid {
GridRow {
Text("Hello")
Image(systemName: "globe")
}
GridRow {
Image(systemName: "hand.wave")
Text("World")
}
}
}
}
表示すると
![](https://assets.st-note.com/img/1656673544250-CWRc7cLU97.png)
Grid {
GridRow {
Text("Hello")
Image(systemName: "globe")
}
Divider()
GridRow {
Image(systemName: "hand.wave")
Text("World")
}
}
Divider()
を追加して実行
![](https://assets.st-note.com/img/1656673654416-IRbZruCIO7.png)
真ん中で分かれて、水平方向に広がっています。
Divider()
.gridCellUnsizedAxes(.horizontal)
とすることで
![](https://assets.st-note.com/img/1656673767145-GXYsamcOaT.png)
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)
実行すると
![](https://assets.st-note.com/img/1656765120996-o9969bsLsL.png?width=800)
Playgroundsで実行する場合は
.frame(width:400,height: 200)
とモディファイアをつけてやると見栄えが良くなります。
Grid(alignment: .bottom, horizontalSpacing: 1, verticalSpacing: 1)
とすることにより
![](https://assets.st-note.com/img/1656765350285-yNCZhM9Exv.png?width=800)
間隔を調整できます。
この記事が気に入ったらサポートをしてみませんか?