SwiftUI2.0更新六之LazyVGrid和LazyHGrid

最新推荐文章于 2025-07-08 14:23:30 发布

原创最新推荐文章于 2025-07-08 14:23:30 发布 · 2.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ios #swift #xcode

本文深入探讨SwiftUI中LazyVGrid与LazyHGrid的使用方法，包括不同场景下的布局调整，如最小宽度限制、每行固定数量的grid及水平Grid的展示，同时介绍了如何将Text视图替换为Button。

新增的网格显示功能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))
            
        ]