如何在 SwiftUI 中增加网格中的填充？

Question

我必须做一个带有图像、两个文本和两个按钮的 collectionView。我想在 LazyVGrid 中增加 VStack 的填充，但无法实现。你能帮我找出问题所在吗？

    let columns = Array(repeating: GridItem(.flexible(), spacing: 20, alignment: .center), count: 2)
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: columns, spacing: 20, content:  {
                  ForEach(data, id:\.self) { item in
                    VStack(alignment: .leading, spacing: 10) {
                            Image("\(item.image)")
                                    .resizable()
                                    .frame(width: 150, height: 200)
                                    .padding(4)
                                    .cornerRadius(10)
                        
                            Text(item.name)
                            Text(item.price)
                                    
                        HStack(spacing: 15) {
                                Button(action: {}) {
                                    HStack {
                                    Image(systemName: "cart")
                                    Text("В Корзину")
                                        .fixedSize(horizontal: true, vertical: false)
                                }
                                .padding(10)
                                .background(Color.blue)
                                .foregroundColor(Color.white)
                                .cornerRadius(10)
                                }
                            Button(action: {}) {
                                Image(systemName: "heart")
                            }
                                .padding(10)
                                .background(Color.white)
                                .clipShape(Rectangle())
                                .foregroundColor(.blue)
                                .cornerRadius(10)
                        }
                }       .foregroundColor(Color.black)
                        .background(Color.red)
                        .cornerRadius(25)
                        .padding(15)
            }
                }).padding(15)
                }
}
}
}

Answer 1

您在这里遇到了很多问题，这些都是小事，加起来会导致您的观点出现重大问题。我做的第一件事就是将您的column 更改为.fixed()。这可能是也可能不是您想要的，但您似乎想要大小相等的网格项目。

我还通过在图像上设置.aspectRatio(contentMode: .fit) 和.frame(height: 140) 来控制图像。

接下来，我尽可能多地删除了.padding()。我还添加了更多 VStacks 和 HStacks 以保持逻辑顺序。当我完成此操作时，问题似乎出在HStack 底部的两个按钮上。根本没有空间，所以我移动了favorite 按钮。

我的总体建议。设置框架，但如果可能，只设置一个方向。在逻辑分组中思考。确保适合不同的视图。使用框架和纵横比管理您的图像。

我必须制作一个数据结构，并使用 SF Symbols，这样它才能在其他人的机器上运行。

struct GridPaddingView: View {
    
    let dataArray: [Datum] = [
        Datum(name: "square", image: "square.and.arrow.up.trianglebadge.exclamationmark", price: "$1.00"),
        Datum(name: "trash", image: "trash.slash.fill", price: "$1.00"),
        Datum(name: "folder", image: "folder.badge.minus", price: "$1.00"),
        Datum(name: "external drive", image: "externaldrive.fill.badge.minus", price: "$1.00"),
        Datum(name: "doc", image: "doc.fill.badge.plus", price: "$1.00"),
        Datum(name: "calendar", image: "calendar.day.timeline.leading", price: "$1.00")
    ]
    
    let columns = Array(repeating: GridItem(.fixed(180), spacing: 10), count: 2)
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: columns)  {
                    ForEach(dataArray) { item in
                        VStack(alignment: .leading) {
                            VStack(alignment: .leading) {
                                Image(systemName: item.image)
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .cornerRadius(10)
                                    .frame(height: 140)
                                HStack {
                                    VStack(alignment: .leading) {
                                        Text(item.name)
                                            .fixedSize(horizontal: false, vertical: true)
                                        Text(item.price)
                                    }
                                    Spacer()
                                    Button(action: {}) {
                                        Image(systemName: "heart")
                                    }
                                    .padding(10)
                                    .background(Color.white)
                                    .foregroundColor(.blue)
                                    .cornerRadius(10)
                                }
                            }
                            .padding(5)
                            
                            Spacer()
                            HStack() {
                                Spacer()
                                Button(action: {}) {
                                    HStack {
                                        Image(systemName: "cart")
                                        Text("В Корзину")
                                            .fixedSize(horizontal: true, vertical: false)
                                    }
                                    .padding()
                                    .background(Color.blue)
                                    .foregroundColor(Color.white)
                                    .cornerRadius(10)
                                }
                                Spacer()
                            }
                        }
                        .padding(10)
                        .frame(height: 300)
                        .background(Color.red)
                        .cornerRadius(25)
                    }
                }
            }
        }
    }
}

struct Datum: Identifiable {
    let id = UUID()
    let name: String
    let image: String
    let price: String
}