创建第一个网格布局并传递按钮视图。
这是网格布局演示。您需要更改按钮视图并将框架赋予内部按钮视图。
网格布局
struct GridLayout<Content: View>: View {
private let rows: Int
private let columns: Int
private let content: (Int, Int) -> Content
init(columns: Int, rows: Int, @ViewBuilder content: @escaping (Int, Int) -> Content) {
self.rows = rows
self.columns = columns
self.content = content
}
var body: some View {
GeometryReader { geo in
VStack(spacing: 10) {
ForEach(0 ..< rows, id: \.self) { row in
HStack(spacing: 10) {
ForEach(0 ..< self.columns, id: \.self) { column in
self.content(row, column)
.frame(width: geo.size.width / 2, height: geo.size.width / 2, alignment: .center)
}
}
}
}
}
}
}
主集合视图
struct MainCollectionView: View {
@State private var isActive : Bool = false
var body: some View {
NavigationView{
ScrollView {
GridLayout(columns: 2, rows: 3) { (row, colom) in
Button {
self.isActive = true
} label: {
Text("Title")
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
}
.background(
RoundedRectangle(cornerRadius: 15).strokeBorder(Color.black, lineWidth: 1.25))
}.padding([.leading, .trailing], 20)
}
}
}
}