根据SwiftUI中的内容制作VStack高度

问题描述

我想做一张“卡片”，但高度取决于项目列表，我不知道如何根据我的尺寸列表设置不同的值...示例：

内容视图结构

struct ContentView: View {
    
    @State private var orderList : [Order] = [
        
        Order(id: 0,productList: [Product(id: 0,name: "itemA",quantity: "24",isEvaluated: true),Product(id: 0,name: "itemB",quantity: "2",isEvaluated: false)]),Order(id: 1,name: "itemC",quantity: "4",name: "itemD",quantity: "12",isEvaluated: false),name: "itemE",quantity: "6",name: "itemF",quantity: "5",Order(id: 2,name: "itemG",isEvaluated: true)]),Order(id: 3,name: "itemH",name: "itemI",name: "itemJ",quantity: "16",name: "itemK",name: "itemL",Order(id: 4,name: "itemm",quantity: "8",isEvaluated: true)])
    ]
    
    
    var body: some View {
        vstack{
            ForEach(orderList,id: \.self){order in
                ScrollView(showsIndicators: false){
                    vstack(alignment: .leading){
                        Group{
                            HStack{
                                Text("#Order " + "\(order.id)").multilineTextAlignment(.center)
                                Spacer()
                                Text("In Progress").multilineTextAlignment(.center)
                            }.padding([.bottom],5)
                        }
                        
                        Group{
                            vstack{
                                ForEach(order.productList.indices) { currentIndex in
                                ItemRow(getProduct(productList: order.productList,index: currentIndex))
                                        .padding(.bottom,5)
                                }
                            }
                        }.padding([.bottom],10)
                        
                        HStack{
                            Text("Products")
                            Spacer()
                            Text("$00.00")
                        }
                        
                        HStack{
                            Text("Shipping Expenses")
                            Spacer()
                            Text("$00.00")
                        }
                        
                        HStack{
                            Text("Total")
                            Spacer()
                            Text("$0.00")
                        }
                        Spacer()
                    }
                    .frame(minWidth: 0,maxWidth: .infinity,minHeight: 0,maxHeight: .infinity,alignment: .topLeading)
                    .padding(10)
                    
                }
                .background(
                    RoundedRectangle(cornerRadius: 2)
                        .fill(Color.white)
                        .shadow(color: .gray,radius: 2,x: 0,y: 2)
                )
                .padding(.bottom,10)
            }
         }
         .padding(16)
    }
    
    func getProduct(productList: [Product],index: Int)-> Product{
        return productList[index]
    }
}

ItemRow 结构

struct ItemRow: View {
    
    let currentProduct: Product
    
    init(_ currentProduct: Product) {
        self.currentProduct = currentProduct
    }
        
    var body: some View {
        HStack{
            HStack{
                Text("• \(currentProduct.name)")
                Spacer()
            }
            HStack{
                Text("quantity \(currentProduct.quantity)")
                Spacer()
            }
            
            if !currentProduct.isEvaluated{
                HStack{
                    Spacer()
                    Button(action:{
                        // do sth
                    }){
                        Text("rate Now!")
                    }
                }
            }
        }
    }
}

附注。在 itemsList 中，您必须像这样创建一个名为 struct 的 Order ：（不要介意硬编码值，我做了它以使示例更容易）

struct Order: Hashable {
    var id: Int
    var productList: [Product]
}

PS2。在 productList 中，您必须像这样创建一个名为 struct 的 Product：

struct Product: Hashable {
    var id: Int
    var name: String
    var quantity : String
    var isEvaluated : Bool
}

解决方法

如果我理解正确的话，您希望卡片（红框）占用尽可能多的空间来显示它们所拥有的内容，而无需滚动卡片本身？

简短的回答。你不需要。

SwiftUI 为您做到了。您在 ContentView 的代码中只有一个小错误。将 ScrollView 移至您拥有 VStack 的级别并移除 VStack。你 ContentView body 现在应该是这样的：

var body: some View {
    ScrollView {
        ForEach(orderList,id: \.self){order in
            VStack(alignment: .leading){
                Group{
                    HStack{
                        Text("#Order " + "\(order.id)").multilineTextAlignment(.center)
                        Spacer()
                        Text("In Progress").multilineTextAlignment(.center)
                    }.padding([.bottom],5)
                }
                
                Group{
                    VStack{
                        ForEach(order.productList.indices) { currentIndex in
                        ItemRow(getProduct(productList: order.productList,index: currentIndex))
                                .padding(.bottom,5)
                        }
                    }
                }.padding([.bottom],10)
                
                HStack{
                    Text("Products")
                    Spacer()
                    Text("$00.00")
                }
                
                HStack{
                    Text("Shipping Expenses")
                    Spacer()
                    Text("$00.00")
                }
                
                HStack{
                    Text("Total")
                    Spacer()
                    Text("$0.00")
                }
                Spacer()
            
            }.background(
                RoundedRectangle(cornerRadius: 2)
                    .fill(Color.white)
                    .shadow(color: .gray,radius: 2,x: 0,y: 2)
            )
            .padding(.bottom,10)
        }
     }
     .padding(16)
}

结果如下：