SwiftUI iOS15下NavigationBar自定义样式出现额外区域如何适配iOS14

问题根因 #

iOS 15 对导航栏渲染逻辑做了三处变更，共同导致了你遇到的问题：

1. 新增scrollEdgeAppearance属性，控制页面滚动到顶部时的导航栏样式，未配置时会使用系统默认透明样式
2. 导航栏默认阴影分割线的渲染逻辑变更，未显式关闭时会显示为浅灰色类空白区域
3. SwiftUI 可滚动容器（List、ScrollView）默认开启顶部内边距自动适配，会额外增加导航栏下方的间距

解决步骤 #

1. 补全全局导航栏配置 #

在AppDelegate中补全阴影、半透明属性的配置，对齐iOS14的默认行为：

let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.beige
// 清除导航栏默认阴影分割线，消除类空白的分割区域
appearance.shadowColor = .clear
appearance.shadowImage = UIImage()

UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
// 全局关闭导航栏半透明属性，避免布局计算偏差
UINavigationBar.appearance().isTranslucent = false

2. 关闭滚动视图自动内边距调整 #

在你的SwiftUI页面中，给可滚动容器添加配置，关闭默认的顶部内边距适配：

struct TargetView: View {
    var body: some View {
        NavigationView {
            List {
                // 页面业务内容
            }
            .navigationBarTitle("页面标题", displayMode: .inline)
            .onAppear {
                // 关闭滚动视图自动内边距调整
                UIScrollView.appearance().contentInsetAdjustmentBehavior = .never
            }
        }
    }
}

如果调整后仍然存在空白，可以额外添加安全区忽略修饰符：

List {
    // 业务内容
}
.ignoresSafeArea(.container, edges: .top)

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