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

Posted 2023-02-24

【中文标题】SwiftUI：如何创建具有相同行数和列数的 LazyGrid？

【英文标题】：SwiftUI: How to create LazyGrid with equal number of rows and columns?

【发布时间】：2020-07-25 08:21:41

【问题描述】：

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

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

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

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

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

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 的大小，但还是不行。关于如何实现这一点的任何其他想法？

【问题讨论】：

您的代码缺少第一行的结尾。大概你想要一个 32 x 32 白色方块的网格，同时在屏幕上显示？没有滚动？

附上的截图是什么意思？它看起来不像你试图达到的目标。

@Magnas 我想创建一个包含 100 个适合屏幕大小的白色方块的网格，无需滚动。

@Asperi 我已经更新了我的问题。我希望现在更清楚了。屏幕截图代表我尝试制作一个包含 100 个正方形的网格，该网格应该很好地适合屏幕，如上例所示。

【参考方案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)
        
    

【参考方案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)

【参考方案3】：

您是否尝试过给定一个无穷大的最大宽度？像这样：

    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)

【讨论】：

这不起作用 - imgur.com/a/VKvSpaU。我不明白您如何通过您的实现实现行数与列数相同的网格。