SwiftUI基础学习日记（九）Grid网格布局

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

大家好，我是小黑，一个还没秃头的程序员~~~

开发的项目一定少不了列表，也有可能会有几行几列的布局，今天就来介绍一下Grid布局，一般使用LazyHGrid、LazyVGrid配合GridItem完成

效果图如下

话不多说，正文开始

（一）LazyVGrid（由于LazyHGrid只有方向上的区别，所以只介绍一种）

init(columns: [GridItem],
alignment: HorizontalAlignment = .center, 
spacing: CGFloat? = nil, 
pinnedViews: PinnedScrollableViews = .init(),
content: () -> Content)

属性/修饰符	说明
columns	用于设置网格每一行的大小和位置的网格项数组
alignment	网格在其父视图中的对齐
spacing	行或者列之间的间距
pinnedViews	将视图固定到父滚动视图的边界
content	网格的内容

网格是“惰性的”，因此需要它们时才创建它们。

（二）GridItem

使用GridItem对单个网格项(如行或列)的描述。

init(_ size: GridItem.Size = .flexible(),
spacing: CGFloat? = nil, alignment: Alignment? = nil)

属性/修饰符	说明
size	网格项的大小
spacing	单项之间的间距
alignment	网格项使用的对齐方式

你可以使用GridItem实例来配置LazyHGrid和LazyVGrid视图中的项目布局。每个网格项目指定间距和对齐等布局属性，网格视图使用这些属性来确定给定列或行中所有项目的大小和位置。

Grid布局是无法滑动的，需要配合ScrollView才能达到列表滑动的效果

LazyVGrid与GridItem配合使用的完整代码如下：

struct GridComponent: View {
    private var symbols = ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
    private var gridItemLayout = [GridItem.init(.flexible(), spacing: 0, alignment: .center),                     GridItem.init(.flexible(), spacing: 0, alignment: .center),         GridItem.init(.flexible(), spacing: 0, alignment: .center)]
   
    var width: CGFloat = UIScreen.main.bounds.width
    
    var body: some View {
     
     
        ScrollView{
            VStack {
                LazyVGrid(columns: gridItemLayout, spacing: 20) {
                    ForEach((0...8), id: \.self) {item in
    //                    Text(symbols[item])
                        NavigationLink(
                            destination: TextView(),
                            label: {
                                HStack{
                                   
                                    VStack(alignment:.leading){
                                        Text("备忘录\(item)").truncationMode(.tail).lineLimit(1)
                                        Text("备忘录\(item)").truncationMode(.tail).lineLimit(1)
                                        Spacer()
                                    }.padding(5)
                                    Spacer()
                                }
                            })
                            .frame(width:self.width/4,height:100)
                            .background(Color.white)
                            .padding(0)
                            .cornerRadius(10).overlay(
                            RoundedRectangle(cornerRadius: 10, style: .continuous)
                                .stroke(Color.color_gray_border, lineWidth: 1)
                        )
                            
                    }
                }
            }
        }
    }
}

上面代码中展示了三行三列的数据，size使用的是flexible，所以宽度会根据屏幕平均分配。

今天的swiftUI学习分享就到这里，后面我会持续输出iOS开发笔记，感谢大家的阅读！