iOS设备旋转时SwiftUI视图宽度更新延迟导致黑边的解决方法

问题分析 #

你的代码中，GeometryReader未应用ignoresSafeArea()，导致它的尺寸始终被安全区限制。屏幕旋转时，GeometryReader的尺寸更新滞后于旋转动画，而内部的Rectangle虽添加了ignoresSafeArea()，但尺寸受限于GeometryReader，因此短暂出现黑边。

解决方案 #

方案1：移除不必要的GeometryReader #

如果仅需让蓝色矩形填充整个屏幕，完全不需要GeometryReader，直接让Rectangle填充父视图即可：

@main
struct TESTApp: App {
    var body: some Scene {
        WindowGroup {
           ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        Rectangle()
            .ignoresSafeArea()
            .foregroundColor(.blue)
    }
}

方案2：给GeometryReader添加ignoresSafeArea #

若确实需要用GeometryReader获取尺寸，将ignoresSafeArea()应用到GeometryReader上，确保它能实时获取整个屏幕的尺寸：

@main
struct TESTApp: App {
    var body: some Scene {
        WindowGroup {
           ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            Rectangle()
                .foregroundColor(.blue)
        }
        .ignoresSafeArea() // 将该修饰符移至此处
    }
}

原理说明 #

• ignoresSafeArea()作用于当前视图及其子视图的布局范围，将其加在GeometryReader上时，GeometryReader会直接获取包括安全区外的整个屏幕尺寸，内部的Rectangle自然填充全区域，旋转时尺寸更新会同步于屏幕动画，不会出现延迟黑边。
• 若无需获取尺寸，直接使用Rectangle加ignoresSafeArea()是最简洁的方式，SwiftUI会自动处理视图的自适应布局。

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