SwiftUI：ZStack模拟半透明模态时如何隐藏NavigationStack返回按钮

方案一：调整模态框层级，解决返回按钮遮挡问题 #

问题根源是自定义模态框放在了NavigationStack内部，而导航栏（包括返回按钮）的渲染层级高于NavigationStack内部的View，因此无法被遮挡。只需将模态框移到NavigationStack外部，就能让它的层级覆盖导航栏。

修改后的SecondView代码：

struct SecondView: View {
  @State private var isViewAVisible = false

  var body: some View {
    ZStack {
      // 原NavigationStack内容
      NavigationStack {
        Color.red.ignoresSafeArea()
        VStack {
          Spacer()
          Button("Toggle View") {
            isViewAVisible.toggle()
          }
        }
      }

      // 模态框放在NavigationStack外部，层级更高
      if isViewAVisible {
        ZStack {
          // 半透明背景，可点击关闭
          Color.black.opacity(0.6)
            .ignoresSafeArea()
            .onTapGesture {
              isViewAVisible.toggle()
            }
          // 模态框内容
          VStack {
            Button {
              isViewAVisible.toggle()
            } label: {
              Text("Hello")
            }
            .frame(height: 300)
            Button {} label: {
              Text("Hello 2 ")
            }
            .frame(height: 300)
          }
        }
        // 添加透明度+缩放的过渡动画
        .transition(.opacity.combined(with: .scale))
        .animation(.easeInOut, value: isViewAVisible)
      }
    }
  }
}

这个方案既保留了原有的透明度动画，又能让模态框背景完全遮挡导航栏的返回按钮。

方案二：给fullScreenCover添加透明度动画 #

使用fullScreenCover时，直接设置presentationBackground的透明度无法触发动画，可通过单独的状态变量控制背景透明度，并配合withAnimation实现平滑过渡：

struct SecondView: View {
  @State private var isViewAVisible = false
  // 单独控制背景透明度的状态
  @State private var backgroundOpacity = 0.0

  var body: some View {
    NavigationStack {
      Color.red.ignoresSafeArea()
      VStack {
        Spacer()
        Button("Toggle View") {
          withAnimation(.easeInOut) {
            isViewAVisible.toggle()
            // 同步更新背景透明度
            backgroundOpacity = isViewAVisible ? 0.6 : 0.0
          }
        }
      }
    }
    .fullScreenCover(isPresented: $isViewAVisible) {
      VStack {
        Button {
          withAnimation(.easeInOut) {
            isViewAVisible.toggle()
            backgroundOpacity = 0.0
          }
        } label: {
          Text("Hello")
        }
        .frame(height: 300)
        Button {} label: {
          Text("Hello 2 ")
        }
        .frame(height: 300)
      }
      // 绑定背景透明度到状态变量
      .presentationBackground(Color.black.opacity(backgroundOpacity))
      // 给模态框内容添加过渡动画
      .transition(.opacity)
    }
  }
}

这样点击按钮时，背景透明度会随模态框的弹出/收起平滑变化，同时fullScreenCover自带的层级也会自动遮挡导航栏的返回按钮。

内容的提问来源于stack exchange，提问作者CarlosAndres