1

我使用以下代码在 SwiftUI 中制作了以下网格：

let columnGrid = [GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0),
                                  GridItem(.fixed(boxWidth), spacing: 0)]

LazyVGrid(columns: columnGrid, spacing: 0) {
                        ForEach((0...80), id: \.self) {
                            Text("\(positions[$0])")
                                .font(.system(size: 27))
                                .frame(width: boxWidth, height: boxWidth)
                                .background(Rectangle().stroke(lineWidth: 0.5))
                        }
                    }

我怎样才能把网格分成几块？例如，将网格分成 4 个块为一组。

阿贝吉
cdfhkl

mnqr
手术后

等等

每次尝试 LazyVGrid 或大量 HStacks 和 VStacks 的组合时，它似乎都超级臃肿。

我还尝试了带有部分的固定标题，但它只能将内容分成几行。我希望它分成行和列。

在 SwiftUI 中是否有一种简单的方法可以做到这一点？

用 LazyVStack 制作的网格

4

1 回答 1

2

您真正想要做的是将 Grid 放入 Grid 中。使用您演示的输出，您需要 a的LazyVGrid 内部LazyHGrid。最困难的部分是对数据进行分块，而不是视图本身。可以这样实现，例如：

在此处输入图像描述

struct LazyVGridInLazyHGridView: View {
    
    @StateObject var vm = LazyVGridInLazyVGridViewModel()
    
    let gridsColumn = [GridItem(.flexible(), spacing: 0), GridItem(.flexible(), spacing: 0)]
    let boxColumn = [GridItem(.fixed(30), spacing: 0), GridItem(.fixed(30), spacing: 0)]
    
    var body: some View {
        LazyHGrid(rows: gridsColumn, spacing: 15) {
            ForEach(vm.data, id: \.self) { box in
                LazyVGrid(columns: boxColumn, spacing: 15) {
                    ForEach(box) { item in
                        Text(item.name)
                    }
                }
                .background(Color.gray.opacity(0.15))
            }
        }
        .frame(height: 150)
    }
}

struct VGridDataModel: Identifiable, Hashable {
    let id = UUID()
    var name: String
}

class LazyVGridInLazyVGridViewModel: ObservableObject {
    @Published var data: [[VGridDataModel]] = []
    
    init() {
        for strideIndex in stride(from: 1, to: 20, by: 4) {
            data.append(Array(strideIndex..<(strideIndex + 4)).map({ VGridDataModel(name: $0.description) } ))
        }
    }
}
于 2022-02-25T14:01:37.210 回答