SwiftUI LazyvGrid 中的统一单元格大小

Posted 2023-02-24

【中文标题】SwiftUI LazyvGrid 中的统一单元格大小

【英文标题】：Uniform cell size in SwiftUI LazyGrid

【发布时间】：2020-08-09 22:44:03

【问题描述】：

我正在实现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 参数，以及直接使用.frame() 或.aspectRatio() 之类的东西从IconButton 中设置框架。然而，这些都与按钮本身有关，而不是与所有其他按钮的大小有关。 This SO answer 有一种方法可以跟踪任何视图的最大尺寸，然后将所有其他视图设置为相同的框架。然而，尽管它似乎从答案中起作用，但这种方法似乎过于复杂，因为它处理的是列表视图上的子视图，而不是网格视图的直接子项。 GridView 有更直观的方法吗？

我可以想象尝试实现这样的主要问题是，由于它是一个lazy 网格，所以底部的单元格在必要时才会布局，因此当它们生成时，这可能如果找到更大尺寸的单元格，则需要更改其他单元格的大小。我不认为这对我的实现有特别的问题，因为我只有大约 15 个单元。这是否表明我应该打扰LazyGrid？

【参考方案1】：

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

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

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

我个人不是这个的粉丝，所以你也可以尝试使用“灵活”的框架：

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