How to create design covering back button and top bar fully with cross button above it?

Question

I am trying to create below design using swiftUI but not able to find proper approach. I tried but my image is not covering back button but coming below to back button

Expected design

  VStack(spacing: 16) {
            VStack {
                ZStack(alignment: .topTrailing) {
                    Image("defaultImage")
                        .resizable()
                        .frame( height: 200)
                    Button("Cancel", action: {
                        print("cancel")
                    })
                    .padding(12)

                }
            }
}

My Design :(

Answer 1

You might want to do a lot of try in SwiftUI to get a custom design right. gave it a quick try for you and added comments on the code so you can understand most of what i did. this is the quick result i got (with a random background i got on internet)

import SwiftUI
struct FirstView: View{
    var body: some View{
        NavigationView {
            VStack{
                NavigationLink(destination: BackgroundImageNav()){
                    Text("Go to the view")
                        .font(.title)
                }
            }
        }
    }
}
struct BackgroundImageNav: View {
    @Environment(\.presentationMode) var presentationMode
    // remplacing the back button action, (only problem is that this disable the swipe back)
    var body: some View {
        ZStack {
            // ZStack help you having your image behind the other views
            VStack {
                Image("defaultImage")
                    .resizable()
                    .frame(height: 180)
                    .edgesIgnoringSafeArea(.all)
                Spacer()
                // having a spacer that push the image on the top and ignoring the safe area
            }
            VStack(alignment:.leading){
                HStack{
                    Button(action:{
                        presentationMode.wrappedValue.dismiss()
                        // back button action
                    }){
                    Image(systemName:"chevron.left")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 30, height: 30)
                        .foregroundColor(.white)
                        }
                        Spacer()
                        Rectangle()
                            .fill(Color.white)
                            .frame(width: 200, height: 80, alignment: .center)
                         Spacer()
                    Button(action:{
                        // do something
                    }){
                    Image(systemName: "xmark")
                        .resizable()
                        .frame(width: 24, height: 24)
                        .foregroundColor(.white)
                        }
                    }.padding()
                    Text("Title")
                        .bold()
                        .font(.title)
                        .foregroundColor(.black)
                        .background(Color.white)
                        .padding(24)
                Spacer()
            }
        }.navigationBarHidden(true)
        // removing the bar to customize the back button
    }
}

struct backgroundImage_Previews: PreviewProvider {
    static var previews: some View {
        FirstView()
    }
}