SwiftUI中我的设计中的堆栈视图未正确显示

我还在学习Swift UI。然而，我想模拟我的UI设计以在SwiftUI中显示，但由于某些原因，它并没有完全正确地显示它。有谁能告诉我，我在代码中犯了哪些错误，而这些错误并不像我的UI设计那样表现出来？谢谢你的帮助

以下是我的UI设计：

以下是我从以下代码中获得的信息：

这是我的密码：

     var body: some View {
    ZStack {
        if Auth.auth().currentUser != nil {
            VStack{
                Spacer()
                HStack(spacing: 15) {
                    PricingView(title: "Check-in", textColor: .white, bgColor: .purple)
                    ZStack {
                        PricingView(title: "Pillars", textColor: .black, bgColor: Color(red: 240/255, green: 240/255, blue: 240/255))
                    }
                }
                .padding(.horizontal)
                HStack(spacing: 15) {
                    PricingView(title: "Resources", textColor: .white, bgColor: .purple)
                    ZStack {
                        PricingView(title: "Chat", textColor: .black, bgColor: Color(red: 240/255, green: 240/255, blue: 240/255))
                    }
                }
                HStack(spacing: 15) {
                    PricingView(title: "Gallery", textColor: .white, bgColor: .purple)

                    ZStack {
                        PricingView(title: "VAPA", textColor: .black, bgColor: Color(red: 240/255, green: 240/255, blue: 240/255))
                    }
                }
                ZStack {
                    PricingView(iconName: "wand.and.rays", title: "More", textColor: .white, bgColor: Color(red: 62/255, green: 63/255, blue: 70/255))
                        .padding()
                }
                Spacer()
            }
        }
    }
}

struct WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        WelcomeView()
    }
}



struct PricingView: View {

    var iconName: String?
    var title: String
    var textColor: Color
    var bgColor: Color
    var bannerText: String?

    init(iconName: String? = nil, title: String, textColor: Color, bgColor: Color, bannerText: String? = "") {
        self.iconName = iconName
        self.title = title
       self.textColor = textColor
        self.bgColor = bgColor
        self.bannerText = bannerText
    }

    var body: some View {

        ZStack {

            VStack {
                iconName.map {
                    Image(systemName: $0)
                        .font(.largeTitle)
                        .foregroundColor(textColor)
                }

                Text(title)
                    .font(.system(.title, design: .rounded))
                    .fontWeight(.black)
                    .foregroundColor(textColor)


            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)

            .padding(40)
            .background(bgColor)
            .cornerRadius(10)



        }
    }
}

struct BannerView: View {

    var messageText: String
    var offset: CGFloat

    var body: some View {
        Text(messageText)
            .font(.system(.caption, design: .rounded))
            .fontWeight(.bold)
            .foregroundColor(.white)
            .padding(5)
            .background(Color(red: 255/255, green:183/255, blue: 37/255))
            .offset(x: 0, y: offset)
    }
}

试试这个。您可以获得类似Pinterest的视图。 首先，请从这里安装此吊舱-

在网格文件中添加以下代码

import SwiftUI
import WaterfallGrid

struct CardGridView: View {

    @State private var cards: [Card] = Generator.Cards.random()

    var body: some View {
        return WaterfallGrid((0..<cards.count), id: \.self) { index in
                   CardView(card: self.cards[index])
               }
    }
}

struct Generator {

    struct Height {
        static func random() -> [Int] {
            Array(30..<90).map { ($0) }.shuffled()
        }
    }

    struct Cards {
        static func random() -> [Card] {
            Height.random().map {
                Card(title: "\($0)", subtitle: "bjashbdahjsdajv", height: $0)
            }
        }
    }

}

---

调用CardGridView（）即可。您可以添加图像和自定义卡视图

嗨，我建议你试试这个。希望有帮助。我需要创建一个名为

CardGridView

的新文件吗？由您决定。您也可以在同一个文件中写入，但最好创建单独的文件。谢谢。有没有一种方法可以在没有库的情况下使用它，比如我的HStack、VStack。。。。等等？目前我没有任何替代解决方案，因为开发这种完美的视图需要很多时间。对于您需要的网格文件，没有任何网格文件或类。你能具体说明你面临的问题吗？

struct CardView: View {
   let card: Card

       var body: some View {
       VStack() {
           HStack() {
               VStack(alignment: .leading) {
                   Text(card.title)
                       .fixedSize(horizontal: false, vertical: true)
                        .frame(width: 100, height: CGFloat(card.height))
                       .layoutPriority(99)
               }
               Spacer()
           }
           .padding([.leading, .trailing, .bottom], 8)
       }
        .background(Color.yellow)
       .cornerRadius(8)
       .background(
           RoundedRectangle(cornerRadius: 8)
               .stroke(Color.secondary.opacity(0.5))
       )
   }
}

struct Card {
    let title: String
    let subtitle: String
    let height: Int
}