父视图忽略安全区但子视图遵循安全区的SwiftUI全屏遮罩问题

针对过渡卡顿、背景全屏但内部元素需遵守安全区的问题，调整后的代码如下，核心是精准控制安全区的作用范围，避免影响父视图和过渡逻辑：

修改后的完整代码 #

struct Tabs: View {
     @State private var showingCover = false

     var body: some View {
        ZStack {
            TabView {
                // 替换为你的Tab页面内容
                Text("首页")
                    .tabItem { Label("首页", systemImage: "house") }
                Text("发现")
                    .tabItem { Label("发现", systemImage: "magnifyingglass") }
            }
            
            if showingCover {
                FullScreenCover(showingCover: $showingCover)
                    .zIndex(1)
                    .transition(.move(edge: .bottom))
                    .ignoresSafeArea() // 仅让遮罩的过渡计算以屏幕底部为基准
            }
        }
    }
}

struct FullScreenCover: View {
    @Binding var showingCover: Bool
    @State private var offset: CGFloat = 0.0

    var body: some View {
        ZStack {
            // 背景自动铺满全屏（包括安全区）
            Color.blue
            
            // 内部元素容器，自动遵守安全区规则
            VStack(spacing: 20) {
                Spacer()
                Text("自定义遮罩内容")
                    .font(.title)
                    .foregroundColor(.white)
                Button("关闭遮罩") {
                    withAnimation(.smooth()) {
                        showingCover = false
                    }
                }
                .buttonStyle(.borderedProminent)
                .padding(.bottom) // 额外底部内边距优化触摸体验
            }
        }
        .offset(y: offset)
        .gesture(
            DragGesture(minimumDistance: 1)
                .onChanged { value in
                    // 拖拽时实时更新偏移量，无需动画
                    if value.translation.height > 0 {
                        offset = value.translation.height
                    }
                }
                .onEnded { value in
                    withAnimation(.smooth()) {
                        if value.predictedEndTranslation.height > 200 {
                            // 拖拽距离足够，关闭遮罩
                            showingCover = false
                            offset = 0
                        } else {
                            // 拖拽不足，回弹原位
                            offset = 0
                        }
                    }
                }
        )
    }
}

关键调整说明 #

• 过渡基准修正：将.ignoresSafeArea()从父ZStack移到遮罩视图的过渡修饰符后，这样过渡动画的计算基准是屏幕最底部边缘，彻底解决了移除动画的卡顿问题，同时不影响TabView的安全区布局。
• 安全区分离处理：背景色Color.blue默认会填充到安全区外，实现全屏效果；内部元素用VStack包裹，SwiftUI会自动让其避开安全区，无需额外设置。
• 手势逻辑优化：移除拖拽过程中的不必要动画嵌套，仅在结束回弹或关闭时添加动画，让拖拽操作更流畅自然。

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