SwiftUI：如何创建具有相同行数和列数的 LazyGrid？

Question

我正在尝试SwiftUI 2使用新的基元LazyVGrid/创建一个网格LazyHGrid。

我的目标是创建一个具有以下属性的网格：

• 每个单元格的宽度和高度相同（基本上是一个正方形）
• 网格具有相同数量的行和列（列 = 行）
• 内容不应该是可滚动的，并且始终适合我的视图/屏幕的大小。

这是一个包含预期结果的视频。这是通过Grid使用 的自定义对象来实现的GeometryReader。

我尝试过.contentMode(1, .fit)将比例限制LazyVGrid为 1:1，但似乎不起作用。红色背景代表网格的框架，这不是预期的行为。

LazyVGrid(columns: [GridItem(.adaptive(minimum: 32), spacing: 0)], spacing: 0) {
    ForEach(1...100, id: \.self) { item in
        Rectangle()
            .aspectRatio(1, contentMode: .fit)
            .border(Color.black)
    }
}
.aspectRatio(1, contentMode: .fit)
.background(Color.red)

我也尝试过使用GeometryReader来修复 的大小LazyVGrid，但它仍然不起作用。关于如何实现这一目标还有其他想法吗？

Answer 1

尝试以下操作（使用 Xcode 12b3 / iOS 14 测试，无 big-sur）

struct TestGridFitView: View {
    let columns = Array(repeating: GridItem(.flexible(minimum: 32), spacing: 0), count: 10)
    var body: some View {
        LazyVGrid(columns: columns, spacing: 0) {
            ForEach(1...100, id: \.self) { item in
                Rectangle().fill(Color.clear)
                    .aspectRatio(1, contentMode: .fit)
                    .border(Color.black)
            }
        }
        .background(Color.red)
        .aspectRatio(contentMode: .fit)
        
    }
}

Answer 2

在看到上面@Asperi的解决方案后，我成功解决了最后一块难题。这是代码：

var body: some View {
    let columns = Array(repeating: GridItem(.flexible(minimum: 4, maximum: 48), spacing: 0), count: 10)

    LazyVGrid(columns: columns, spacing: 0) {
        ForEach(1...100, id: \.self) { item in
            Rectangle()
                .aspectRatio(1, contentMode: .fit)
                .border(Color.black)
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
    .aspectRatio(1, contentMode: .fit)
    .background(Color.red)
}