Question

所以，基本上我创建了一个由 ZStack 组成的 HeaderView，它占据整个屏幕空间，因为它添加了纯黑色背景和位于黑色背景上的整个标题（因此需要 Zstack）。一切看起来都如我所愿，但是我很难将 HeaderView 放在 ZStack 的顶部，以便为我需要在标题下方添加的所有其他视图腾出空间。

我当前的代码是：


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)
        }
        
    }
    
}

视图当前看起来像这样，尽管我真的希望它像每个标题一样位于顶部。

Text

有什么建议吗？例如，我尝试在调用 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 的顶部？

2 个答案: