VStack 和 Hstack 对齐以及子视图的行为是什么？

Question

我已经开始学习 SwiftUI，所以我想实现我的项目屏幕之一。根据我的理解，我做了类似的事情，但结果并不好。 这里的要求是页面不应该滚动并且必须按比例设置。有四种视图

1. 名称部分标题 - 0.1 高度
2. 功能列表 - 0.4 高度
3. 仪表板列表 - 0.4 高度
4. 底部标签 - 0.1 高度

这就是我们使用 UIStoaryboard 所做的。我们想用 SwiftUI 实现的相同功能用于练习。

这里我试过代码：

struct ContentView: View {
    var body: some View {
//        let fetures: [[String]] = [["Loan certification", "Loan sticker", "Loan Store"],["Loan Index", "Loan Card", "Loan Trade"],["Loan Parc", "Loan DocX", "Loan Stack"]]
        
        
        let simpleFeatures : [String] = ["Loan certification", "Loan sticker", "Loan Store","Loan Index", "Loan Card", "Loan Trade","Loan Parc", "Loan DocX", "Loan Stack"]
        
        let bottomFeatures : [String] = ["Loan History", "Loan Track", "QR Scan","Request Dealer"]
        
//        let dashBoardFeatures
        
        ZStack{
            Rectangle()
                .foregroundColor(Color.orange).edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
                
            VStack{
                Spacer()
                HStack{
                    Text("Karthikeyan").padding([.all])
                    Spacer()
                    
                }.background(Color.white)
                Spacer()
                VStack(){
//                    Spacer()
                    ForEach(0..<simpleFeatures.count/3) { row in // create number of rows
                        HStack() {
                            ForEach(0..<3) { column in // create 3 columns
                                Spacer()
                                Button(action: {}) {
                                    VStack {
                                        Image(systemName: "gift")
                                        Text(simpleFeatures[row * 3 + column])
                                    }
                                }.frame(maxWidth: .infinity).padding()
                                .foregroundColor(.white)
                                .background(Color.gray)
                            Spacer()

                            }
                        }
                        
                    }
//                    Spacer()
                }.background(Color.white).padding([])
                Spacer()
                VStack{
                    Spacer()
                    HStack{
                        Text("Dashboard").padding([.all])
                        Spacer()
                        Text("See all").padding([.all])
                        
                    }.background(Color.white)
                    
                    HStack(spacing: 5.0){
                        Spacer()
                        Image("1").resizable()
                        Image("2").resizable()
                        Image("3").resizable()
                        Spacer()
                    }
                    HStack{
                        Text("Offers").padding([.all])
                        Spacer()
                        Text("See all").padding([.all])
                        
                    }.background(Color.white)
                    HStack(spacing: 5.0){
                        Spacer()
                        Image("4").resizable()
                        Image("5").resizable()
                        Image("6").resizable()
                        Spacer()
                    }
                    Spacer()
                }.background(Color.white)
                Spacer()
                VStack{
                    HStack(spacing: 0.0) {
                        ForEach(0..<bottomFeatures.count) { index in // create 3 columns
                            Spacer()
                            Button(action: {}) {
                                VStack {
                                    Image(systemName: "gift")
                                    Text(bottomFeatures[index])
                                }
                            }.frame(minHeight: 0, maxHeight: 50)
                            .padding()
                            .foregroundColor(.white)
                            .background(Color.gray)
                            Spacer()

                        }
                    }.frame(maxWidth: .infinity,minHeight: 0, maxHeight: 50)
                }.background(Color.white)
                
            }
            .padding(.all, 10)
            .background(Color.clear)
        }
    }
}

我的 iPhone 和 iPad 模拟器输出屏幕