SwiftUI - Grid网格布局简单用法

先干为敬


import SwiftUI

struct SysGrid: 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 body: some View {
        VStack {
            Text("下面是: LazyVGrid")
            LazyVGrid(columns: gridItemLayout, spacing: 20) {
                ForEach((0...8), id: \.self) {
                    Text(symbols[$0])
                }
            }
            Divider.init().padding(10).foregroundColor(.red)
                .background(Color.yellow)
            
            Text("下面是: LazyHGrid")
            LazyHGrid.init(rows: gridItemLayout, spacing: 20) {
                ForEach((0...8), id: \.self) {
                    Text(symbols[$0])
                }
            }
        }
    }
}

模拟器效果图如下


Simulator Screen Shot - iPhone 13 mini - 2022-01-10 at 13.44.59.png

你可能感兴趣的:(SwiftUI - Grid网格布局简单用法)