SwiftUI自定义类似.sheet的ViewModifier时NavigationView安全区frame异常

核心问题原因 #

1. SettingsView外层冗余的GeometryReader未被使用，反而会强制视图撑满全部可用空间，干扰NavigationView自身的安全区适配逻辑
2. 动画修饰符的绑定范围过大，会触发弹窗内部布局在动效过程中动态重算，导致安全区适配不断调整，出现frame超出的异常
3. 布局顺序错误：过渡动效属性放在了frame布局属性之前，导致动效过程中布局规则持续变动

修复后代码 #

1. SettingsView调整 #

移除冗余的GeometryReader即可：

struct SettingsView: View {
    @Binding var showingSelf: Bool
    @Binding var retryWrongCards: Bool
        
    var body: some View {
        NavigationView {
            List {
                Section {
                    Toggle(isOn: $retryWrongCards) {
                        Text("Retry Wrong Cards")
                    }
                }
            }
            .animation(nil)
            .navigationViewStyle(StackNavigationViewStyle())
            .listStyle(GroupedListStyle())
            .navigationBarTitle("Settings")
            .navigationBarItems(trailing: Button("Done") {
                self.showingSelf = false
            })
        }
    }
}

2. Popup修饰符调整 #

调整布局顺序，限制动画触发范围，主动指定安全区规则：

struct Popup<T: View>: ViewModifier {
    let popup: T
    let isPresented: Bool

    init(isPresented: Bool, @ViewBuilder content: () -> T) {
        self.isPresented = isPresented
        popup = content()
    }

    func body(content: Content) -> some View {
        content
            .overlay(popupContent())
    }

    @ViewBuilder private func popupContent() -> some View {
        GeometryReader { geometry in
            if isPresented {
                popup
                    // 先固定弹窗尺寸
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    // 主动忽略外层安全区，让内部NavigationView自行适配安全区
                    .ignoresSafeArea()
                    // 动画仅绑定isPresented状态，避免触发内部不必要的布局动画
                    .animation(.spring(), value: isPresented)
                    // 过渡动效放在布局属性之后
                    .transition(.offset(x: 0, y: geometry.belowScreenEdge))
            }
        }
    }
}

private extension GeometryProxy {
    var belowScreenEdge: CGFloat {
        UIScreen.main.bounds.height - frame(in: .global).minY
    }
}

补充说明 #

如果仍存在细微的布局跳动，可以在NavigationView的修饰符中添加.id(isPresented)，强制弹窗展示时重新渲染NavigationView，避免布局缓存导致的异常。

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