Coloque uma barra superior acima de uma imagem de fundo usando SwiftUI

Para alcançar o resultado que presumo que você espera, primeiro você precisa passar Spacerde ZStackpara VStack. Aqui está o snippet de código editado para sua referência:

var body: some View {
  ZStack {
    Image("home_bg")
      .resizable()
      .scaledToFill()
      .edgesIgnoringSafeArea(.all)
    VStack {
      HStack {
        Button { dismiss() } label: {
          Image(systemName: "arrow.left")
            .font(.system(size: 25.0))
            .tint(.white)
            .padding(.trailing, 6.0)
          }
          Text("Appointment")
            .font(.calibriRegular(with: 20))
            .foregroundStyle(.white)
          Spacer()
        }
          .padding(.vertical, 16.0)
          .padding(.horizontal, 32.0)
          .background(
            Color
              .appGreen2
              .ignoresSafeArea()
          )
      Spacer() // <– This one.
    }
  }
}

Aqui está o resultado:

(Na captura de tela você vê outra imagem de fundo e outra cor verde, porque obviamente não tenho seus ativos fora do padrão.)

Também brinquei Buttonum pouco com os preenchimentos para corrigi-los - talvez isso seja outra coisa que você queira consertar.

A razão pela qual você vê apenas uma barra verde fina na parte superior da segunda captura de tela é porque a imagem de fundo está dentro ZStacke está sendo dimensionada para preencher. Isso aumenta o tamanho do ZStackpara o tamanho da imagem, que inclui conteúdo fora da tela.

Eu sugeriria aplicar a imagem usando .background, então você nem precisa de um ZStack. Também:

• Aplique maxHeight: .infinityao VStack, para que ele preencha toda a altura da tela.
• Utilize alignment: .top, para que a barra verde apareça no topo da tela.
• Você não precisa aplicar .ignoresSafeArea()no fundo verde, pois isso acontece por padrão. Veja background(_:ignoresSafeAreaEdges:) .

var body: some View {
    VStack {
        HStack {
            Button  {
                dismiss()
            } label: {
                Image(systemName: "arrow.left")
                    .font(.system(size: 25))
                    .tint(.white)
                    .padding(.trailing, 6)
            }

            Text("Appointment")
                .font(.calibriRegular(with: 20))
                .foregroundStyle(.white)
            Spacer()
        }
        .padding(16)
        .background(.appGreen2)
    }
    .frame(maxHeight: .infinity, alignment: .top)
    .background {
        Image("home_bg")
            .resizable()
            .scaledToFill()
            .ignoresSafeArea()
    }
}

Você pode simplesmente configurar alignmento ZStack, é .centerpor padrão:

ZStack(alignment: .top) { 
    ...
}