SwiftUI 4 新功能 之 网格视图Gridview组件 （教程含源码）

SwiftUI 4 引入了一个名为Gridview 的新容器视图。AGrid是一个容器视图，它通过将其子视图排列成行和列来为我们提供二维布局。

Grid我们通过使用集合初始化来创建布局GridRows。让我们创建一个示例以更好地理解：

struct ContentView: View { 
    var body: some View { 
        VStack { 
           Grid { 
                GridRow { 
                    Label("OpenSwiftUI", systemImage: "heart") 
                    Label("iOS Development", systemImage: "graduationcap") 
                } 
            }
             .font(.title3) 
        } 
        .padding() 
    } 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

我们可以像这样添加更多的网格行：

struct ContentView: View { 
    var body: some View { 
        VStack { 
            Grid { 
                GridRow { 
                    Label("OpenSwiftUI", systemImage: "heart") 
                    Label("iOS Development", systemImage: "graduationcap") 
                } 
               GridRow { 
                    Label("SwiftUI" , systemI
1
2
3
4
5
6
7
8
9