SwiftUI2.0更新六之LazyVGrid和LazyHGrid

新增的网格显示功能LazyVGrid以及LazyHGrid

LazyVGrid

let text = (1...10).map{"Hello\($0)"}
//以最小宽度160斤可能在一行放入grid
let columns = [GridItem(.adaptive(minimum: 160))]  

body内

var body: some View {
        ScrollView{
            Section(header: Text("最小160")){
            LazyVGrid(columns: columns, spacing: 20){
                ForEach(text, id: \.self){
                    item in
                    Text(item)
                }
            }
        }
        }

为了方便对比不同的情况，先加入Section

修改一下

let columns = [GridItem(.adaptive(minimum: 80))] 

增加新的变量

//每行三个grids,大小灵活分配
let columnsFixed = [
            GridItem(.flexible()),
            GridItem(.flexible()),
            GridItem(.flexible())
    ]

body代码修改为

var body: some View {
        ScrollView{
            Section(header: Text("最小80")){
            LazyVGrid(columns: columns, spacing: 20){
                ForEach(text, id: \.self){
                    item in
                    Text(item)
                }
            }
        }
            Section(header: Text("每行三个Grid")){
            LazyVGrid(columns: columnsFixed, spacing: 20){
                ForEach(text, id: \.self){
                    item in
                    Text(item)
                }
            }
            }
        }
    }

再加入新的变量

 //第一个100固定，第二个尽量填满
    let columnsFixed100 = [
        GridItem(.fixed(100)),
        GridItem(.flexible()),
    ]

body内新增section

Section(header: Text("第一个固定100")){
            LazyVGrid(columns: columnsFixed100, spacing: 20){
                ForEach(text, id: \.self){
                    item in
                    Text(item)
                }
            }
        }

理论上讲只要是view都可以适用，也就是说把Text换成Button毫无压力。

Section(header: Text("第一个固定100")){
            LazyVGrid(columns: columnsFixed100, spacing: 20){
                ForEach(text, id: \.self){
                    item in
                    Button(item){
                        print("itme pressed")
                    }
                }
            }
        }

LazyHGrid
水平Grid

	//水平
    let items = 1...10
    //一列两个，最小高度50
     let rows = [
            //GridItem(.fixed(40))
            GridItem(.flexible(minimum: 50)),
            GridItem(.flexible(minimum: 50))
            
        ]

再增加body内的section