Stacking a HStack below a ZStack in SwiftUI

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

Solution

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
}