ios – Methods to make headerView with overlapping content material design in SwiftUI

I would like half of Header View to be coated with remaining UI. I’m utilizing header view and checklist in keeping with UI design and given checklist prime padding in (- worth) so it goes up on header view now UI appears good however once I scroll checklist then my header title covers with checklist content material.. repair it? I heard Utilizing Zstack just isn’t good method for UI is it appropriate? please information me.. I attempted ChatGPT and Clude but it surely offers un comprehensible repair so I’m asking right here.

after scrolling title covers picture:

I would like like this:

Code:

struct TaskList: View {
 
    @StateObject var coredataViewmodel = CoreDataViewModel()

    var physique: some View {
        NavigationStack {
            VStack {
           
                HeaderView(screenTitle: "Process Listing")
                
                ListView
                    .padding(.prime, -150)
                
                .overlay(alignment: .bottomTrailing) {
                addButton
                }
                
            }
            .background(Colour.taskBackground)
            .onAppear {
                coredataViewmodel.loadTasks()
            }

        }

    }
}

struct HeaderView: View {
    
    var screenTitle: String = ""
    var isBackButtonNeed: Bool = false
    @Surroundings(.dismiss) var dismiss
    
    var physique: some View {
        VStack {
            HStack {
                if isBackButtonNeed {
                    Button {
                        print("again tapped")
                        dismiss()
                    } label: {
                        Picture(systemName: "arrow.backward")
                            .font(.system(dimension: 24, weight: .daring))
                            .foregroundStyle(.white)
                    }
                }

                Spacer()
            }
            .padding(.horizontal)
            .padding(.vertical)

            .overlay {
                Textual content(screenTitle)
                    .font(.system(dimension: 30, weight: .daring))
                    .foregroundStyle(Colour.fieldsColour)
            }
            Spacer()
        }
        .navigationBarBackButtonHidden(true)

        .body(maxWidth: .infinity, maxHeight: 150)
        .background(
            Colour.taskTitleColour
                .ignoresSafeArea()
        )
    }
}