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()内部设置框架。但是，这些都与按钮本身有关，而不是与所有其他按钮的大小有关。 This SO answer可以跟踪任何视图的最大尺寸，然后使用相同的框架设置所有其他视图。但是，尽管它似乎可以解决问题，但这种方法似乎过于复杂，因为它处理的是列表视图的子视图，而不是网格视图的直接子项。 GridView是否有更直观的方法？

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

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

SwiftUI LazyGrid中的统一单元格大小

1 个答案: