Swiftui ，按钮网格视图

问题描述

我在这里检查了几个关于网格视图的问题，但我的问题有点不同，我想为按钮创建一个网格视图，以便按下每个按钮时导航到不同的视图， 所以它看起来像这个图像： This is the grid buttons view

所以我在这里写了这段代码，但看起来我并没有很成功地得到我想要的东西， 有没有更好的想法来实现这种设计为网格视图？

import SwiftUI

struct MainCollectionView: View {


var MainCollectionView: CollectionView
   @State private var isActive : Bool = false
var body: some View {
    NavigationView{
    ScrollView {
        ForEach(0..<2) { row in
                HStack {
                    ForEach(0..<2) { col in
                        Button(MainCollectionView.title) {
                    
                    self.isActive = true
                
                    
                        }//button exit
                    .accentColor(Color.black)
                    .padding(.horizontal,16)
                    .padding(.vertical,10)
                    .background(
                       Capsule().strokeBorder(Color.white,linewidth: 1.25))
                        
                    }
                    
                }
                
            }
        }}
                        
                        
                        
                    }
                }
  
struct MainCollectionView_Previews: PreviewProvider {
    static var previews: some View {
        MainCollectionView(MainCollectionView: CollectionViewData[0])
    }
}

解决方法

创建第一个网格布局并传递您的按钮视图。 这是网格布局演示。您需要更改按钮视图并将框架赋予内部按钮视图。 网格布局

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)
            }
        }
    }
}