SwiftUI LazyGrid 中的统一单元格大小

Question

我正在实现，LazyVGrid但希望所有单元格都具有相同的垂直和水平尺寸。目前我的观点是这样的：

添加阴影后，调整单元格背景的大小以使其完全匹配非常重要。到目前为止，我的代码是：

struct IconButton: View {
    
    let icon: Icon
    
    var body: some View{
        Button {
            
        } label:{
            VStack{
                Image(icon.imageName)
                    .resizable()
                    .scaledToFit()
                Text(icon.title)
                    .font(.title3)
                    .bold()
                    .foregroundColor(.black)
                    .multilineTextAlignment(.center)
            }
        }
    }
}    

ScrollView{
            LazyVGrid(columns: Array(repeating: .init(), count: 3)){
                ForEach(icons, id: \.self){icon in
                    IconButton(icon: icon)
                }
                .padding(12)
                .background(Color.white)
                .cornerRadius(8)
                .shadow(radius: 4)
            }
            .padding()
        }

到目前为止，我已经尝试更改GridColumns参数，以及IconButton直接使用.frame()或使用类似的东西设置框架.aspectRatio()。然而，这些都与按钮本身有关，而不是与所有其他按钮的大小有关。这个 SO 答案有一种方法可以跟踪任何视图的最大尺寸，然后随后将所有其他视图设置为相同的框架。然而，尽管从答案来看似乎可行，但这种方法似乎过于复杂，因为它处理的是列表视图上的子视图，而不是网格视图的直接子项。有没有更直观的方法GridView？

我可以想象尝试实现这样的东西时遇到的主要问题是，由于它是一个lazy网格，底部的单元格只有在必要时才会布局，因此当它们生成时，这可能需要其他单元格的大小如果发现尺寸较大的单元格，则进行更改。我预计这对我的实施不会有什么特别的问题，因为我只有大约 15 个单元。这是否表明我应该为 a 烦恼LazyGrid？

Answer 1

细胞本身的大小实际上是相同的。您会注意到没有任何项目溢出到另一行的区域。然而，这里的内容是单元格内的内容紧贴其固有大小，而不是占据尽可能多的空间。

我还没有对此进行测试，但是您可以尝试的一件事是将其全部包装在 a 中GeometryReader，然后使用代理大小显式设置您自己的大小：

GeometryReader { proxy in
  Button(...)
    .frame(width: proxy.size.width, height: proxy.size.height)
}

我个人不喜欢这个框架，所以你也可以尝试使用“灵活”框架：

Button(...)
  .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)