Stacking a HStack below a ZStack in SwiftUI

Question

Disclaimer: New to SwiftUI

I know a ZStack() view allows me to overlap views, which is what I want for the heading section of the app.

I set the ZStack() to not take up the entire height and had expected an HStack(), placed after the ZStack() to do just that, appear after. Instead it also overlaps with the ZStack.

I'm sure it's a simple solution to co-exist. Image and code below.

var body: some View {
            GeometryReader { geometry in
                ZStack(alignment: .topLeading) {
                    Ellipse()
                    .fill(self.bgColor)
                    .frame(width: geometry.size.width * 1.4, height: geometry.size.height * 0.28)
                    .position(x: geometry.size.width / 2.35, y: geometry.size.height * 0.1)
                    .shadow(radius: 3)
                    .edgesIgnoringSafeArea(.all)
                    
                    HStack(alignment: .top) {
                        VStack(alignment: .leading) {
                            Text(self.title)
                                .font(.title)
                                .fontWeight(.bold)
                                .foregroundColor(Color.white)
                            
                            Text(self.subtitle)
                                .font(.subheadline)
                                .fontWeight(.regular)
                                .foregroundColor(Color.white)
                        }
                        .padding(.leading, 25)
                        .padding(.top, 20)
                        Spacer()
                        VStack(alignment: .trailing) {
                            Image("SettingsIcon")
                                .resizable()
                                .scaledToFit()
                                .frame(width: 30, height: 30)
                        }
                        .padding(.top, 20)
                        .padding(.trailing, 25)
                    }
                }
                .fixedSize(horizontal: false, vertical: true)
                HStack(alignment: .top) {
                    Text(self.title)
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(Color.white)
                }
     
            }
        }

@AdR I'll look into that and go from there, thanks for the input — Dan, Feb 14 '22 at 21:00
@AdR zIndex is for layering views inside a ZStack. I wanted the HStack() to align itself below the ZStack(). See the blue outline of the ZStack in the image above. I want to add a view below that, not on top of it. — Dan, Feb 14 '22 at 21:09

dudette · Accepted Answer · 2022-02-15T00:00:55.253

Try the following code using a top VStack and closing the GeometryReader before the last HStack:

var body: some View {
    VStack {  // <-- here
        GeometryReader { geometry in
            ZStack(alignment: .topLeading) {
                Ellipse()
                  .fill(self.bgColor)
                    .frame(width: geometry.size.width * 1.4, height: geometry.size.height * 0.28)
                    .position(x: geometry.size.width / 2.35, y: geometry.size.height * 0.1)
                    .shadow(radius: 3)
                    .edgesIgnoringSafeArea(.all)
                
                HStack(alignment: .top) {
                    VStack(alignment: .leading) {
                        Text(self.title)
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                        
                        Text(self.subtitle)
                            .font(.subheadline)
                            .fontWeight(.regular)
                            .foregroundColor(Color.white)
                    }
                    .padding(.leading, 25)
                    .padding(.top, 20)
                    Spacer()
                    VStack(alignment: .trailing) {
                        Image("SettingsIcon")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 30, height: 30)
                    }
                    .padding(.top, 20)
                    .padding(.trailing, 25)
                }
            }.fixedSize(horizontal: false, vertical: true)
        } // <-- here end GeometryReader
        
        HStack(alignment: .top) {
            Text(self.title)
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
        }
    } // <-- here end VStack
}

Stacking a HStack below a ZStack in SwiftUI

1 Answers1