Swiftui ，按钮网格视图 [英] Swiftui , Buttons grid view

问题描述

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

I have checked several questions here about the grid view but my question is a bit different , i want to create a grid view for buttons so each button when pressed navigate to different view, So it has look like this image: This is the grid buttons view

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

so i have wrote this code here but looks like i wasn't very successful to get what i want, Is there a better idea to achieve this design as grid 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])
    }
}

推荐答案

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

Create the first grid layout and pass your button view. Here is the grid layout demo. You need to change the button view and give frame to inner button view. Grid layout

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

这篇关于Swiftui ，按钮网格视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！