如何将视图推到 ZStack 的顶部？

Question

所以，基本上我创建了一个 HeaderView，它由占据整个屏幕的 ZStack 组成 space 因为它添加了纯黑色背景和整个 header黑色背景（因此需要 Zstack）。一切看起来都是我想要的，但是我很难尝试将我的 HeaderView 放在 ZStack 的顶部，以便为我需要在 [= 下面添加的所有其他视图制作 space 24=].

我当前的代码是：


struct HomeView: View {
    
    var body: some View {
            ZStack() {
                Color.black.edgesIgnoringSafeArea(.all)
                HeaderView()
                
            }
    }
}



struct HeaderView: View {
    let name = "John"
    let lastName = "Gonzalez"
    let points = Int.random(in: 4000..<6000)
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 5) {
                Text(self.name)
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                Text(self.lastName)
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                
                HStack {
                    Text("Premium")
                        .frame(width: 90, height: 30)
                        .background(Color.green)
                        .cornerRadius(7)
                        .foregroundColor(.white)
                    
                    
                    Image(systemName: "bolt.fill")
                        .foregroundColor(.yellow)
                        .padding(.leading, 10)
                    Text(String(self.points))
                        .foregroundColor(.white)
                    Text("Points")
                        .foregroundColor(.white)
                        .font(.callout)
                        .fontWeight(.bold)
                }
                .padding(.top, 13)
            }
            .padding(.horizontal, 20)
            Spacer()
            
            Image("profilePicture")
                
                .resizable()
                .scaledToFit()
                .frame(width: 100, height:100)
                .clipShape(Capsule())
                .shadow(radius: 10)
                .padding(.trailing, 1)
        }
        
    }
    
}

视图目前看起来像这样，虽然我真的希望它像每个 header 一样位于顶部。

有什么建议吗？例如，我尝试在调用 HeaderView() 之后添加一个 Spacer()，以便将 Header 推到 ZStack 的顶部，但这实际上什么也没做。感谢您的帮助！

Answer 1

您可以使用 VStack 并使用 .backgroundColor。

struct HomeView: View {
    var body: some View {
        VStack() {
            HeaderView()
            Spacer()
        }
        .background(Color.black)
        .edgesIgnoringSafeArea(.all)
    }
}

Answer 2

您可以对齐 .top 您的 ZStack:

struct HomeView: View {
    var body: some View {
        ZStack(alignment: .top) {
            YourContent()
            HeaderView()
        }
        .background(Color.black)
        .edgesIgnoringSafeArea(.all)
    }
}

如何将视图推到 ZStack 的顶部？

How to push a view to the top of a ZStack?

swiftui

zstack