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

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

Answer 1

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

我没有对此进行测试，但是您可以尝试将其全部包装在 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 中的统一单元格大小

Uniform cell size in SwiftUI LazyGrid

swift

swiftui

ios14