Ios SwiftUI：如何创建行数和列数相等的LazyGrid？

我正在尝试使用新的原语LazyVGrid/LazyHGrid在Swiftui2中创建一个网格

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

每个单元格的宽度和高度基本相同，基本上是正方形 网格的行数相等，列数=行 内容不应该是可滚动的，并且总是适合我的视图/屏幕的大小。 下面是一段视频，其中包含了预期的结果。这是通过使用GeometryReader的自定义栅格对象实现的

我尝试使用.contentMode1.fit将懒散网格限制为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的大小，但仍然不起作用。关于如何实现这一点，还有其他想法吗？

请尝试以下使用Xcode 12b3/iOS 14测试的方法，没有什么大问题

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

---

使用Xcode 12b3/iOS 14尝试以下测试，没有大的附加值

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

---

你试过给一个无限大的最大宽度吗？像这样：

    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)
    }
}
.frame(maxWidth: .infinity)
.background(Color.red)

---

你试过给一个无限大的最大宽度吗？像这样：

    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)
    }
}
.frame(maxWidth: .infinity)
.background(Color.red)

在看到上面的解决方案后，我终于解决了难题的最后一部分。代码如下：

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

在看到上面的解决方案后，我终于解决了难题的最后一部分。代码如下：

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

---

您的代码缺少第一行的结尾。大概你想要一个由32 x 32个白色方块组成的网格，所有方块都同时出现在屏幕上？没有滚动？附加的屏幕截图是什么意思？它看起来不像你想要达到的效果。@Magnas我想用100个适合屏幕大小的白色正方形创建一个网格，而不滚动。@Asperi我已经更新了我的问题。我希望现在更清楚。屏幕截图显示了我试图制作一个包含100个正方形的网格，该网格应该很好地适合屏幕，如上图所示。您的代码缺少第一行的结尾。大概你想要一个由32 x 32个白色方块组成的网格，所有方块都同时出现在屏幕上？没有滚动？附加的屏幕截图是什么意思？它看起来不像你想要达到的效果。@Magnas我想用100个适合屏幕大小的白色正方形创建一个网格，而不滚动。@Asperi我已经更新了我的问题。我希望现在更清楚。屏幕截图代表了我试图制作一个包含100个正方形的网格，该网格应该很好地适合屏幕，如上图所示。这不起作用-。我不明白如何用你的实现来实现一个行数和列数相同的网格。这是行不通的-。我不明白如何用实现实现实现一个行数与列数相同的网格。