Swiftui, вид сетки кнопок

Я проверил несколько вопросов здесь о представлении сетки, но мой вопрос немного отличается, я хочу создать представление сетки для кнопок, чтобы каждая кнопка при нажатии переходила в другое представление. Таким образом, это выглядело так: Это вид кнопок сетки

поэтому я написал этот код здесь, но похоже, что мне не очень удалось получить то, что я хочу. Есть ли лучшая идея реализовать этот дизайн в виде сетки?

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

swiftui swiftui-navigationlink swiftui-list swiftui-navigationview swiftui-environment
person ijiojl    schedule 25.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Создайте первый макет сетки и передайте вид кнопок. Вот демонстрация макета сетки. Вам нужно изменить вид кнопки и дать рамку внутреннему виду кнопки. Макет сетки

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

MainCollectionView

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)
            }
        }
    }
}
person Raja Kishan    schedule 25.01.2021
comment
спасибо за вашу помощь, я просто застрял в этом макете представления сетки в предварительном просмотре, он показывает это (отсутствуют аргументы для параметров 'columns', 'rows', 'content' in call)? - person ijiojl; 25.01.2021
comment
Передайте то же самое, что я использовал в теле - person Raja Kishan; 25.01.2021
comment
статические предварительные просмотры переменных: некоторые View {GridLayoutView (columns: Int, rows: Int, content: (Int, Int) - ›MainCollectionView)} // я написал это так, но он говорит, что не удалось диагностировать - person ijiojl; 25.01.2021