0

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

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

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

1 回答 1

2

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

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)
            }
        }
    }
}
于 2021-01-25T17:59:45.863 回答