SwiftUI中ScrollView内容穿透NavigationBar显示到屏顶问题排查

• SwiftUI 中ScrollView默认会自动铺满整个父视图的可用空间，包括导航栏、状态栏覆盖的顶部安全区域，默认不会自动给滚动内容添加避开导航栏的内边距。
• 系统默认的导航栏是半透明毛玻璃材质，本身不是完全不透明的遮挡层，当滚动内容滑入导航栏下方区域时，会直接透过半透明层显示，甚至在导航栏外观配置异常时直接穿透到顶部状态栏区域。
• 问题代码中Attribution视图的ScrollView外层套了无意义的空VStack，且没有配置导航栏的不透明属性，也没有给滚动视图指定正确的安全区域避让规则，最终导致内容溢出穿透。
• 额外布局隐患：当前通过.background挂载NavigationLink的写法不是官方推荐的导航实现方式，会导致视图层级优先级异常，也可能加剧布局错乱问题。

通用兼容方案（支持iOS 14+全版本） #

直接修改Attribution视图实现即可，不需要改动上层父视图：

struct Attribution: View {
    @Environment(\.presentationMode) var presentation
   
    var body: some View {
        // 移除多余的VStack包裹，ScrollView直接作为根容器
        ScrollView {
            Text(attribution)
                .padding()
        }
        // 仅允许ScrollView在底部延伸到安全区，顶部自动避让导航栏/状态栏
        .ignoresSafeArea(edges: .bottom)
        .navigationBarTitle("Attribution", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .toolbar(content: {
            ToolbarItem(placement: .navigationBarLeading) {
               Button(action: { self.presentation.wrappedValue.dismiss() }, label: { 
                  Image(systemName: "chevron.backward")
               })
            }
        })
        .onAppear {
            // 配置导航栏为完全不透明，彻底遮挡后方滚动内容
            let navBarAppearance = UINavigationBarAppearance()
            navBarAppearance.configureWithOpaqueBackground()
            navBarAppearance.backgroundColor = .systemBackground
            UINavigationBar.appearance().standardAppearance = navBarAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
        }
    }
}

iOS 16+ 简化方案 #

如果项目最低支持版本为iOS 16，可以直接用原生SwiftUI API配置，不需要调用UIKit的UINavigationBarAppearance：

struct Attribution: View {
    @Environment(\.presentationMode) var presentation
   
    var body: some View {
        ScrollView {
            Text(attribution)
                .padding()
        }
        .ignoresSafeArea(edges: .bottom)
        .navigationBarTitle("Attribution", displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        // iOS16+ 原生导航栏不透明配置
        .toolbarBackground(.visible, for: .navigationBar)
        .toolbarBackground(Color(uiColor: .systemBackground), for: .navigationBar)
        .toolbar(content: {
            ToolbarItem(placement: .navigationBarLeading) {
               Button(action: { self.presentation.wrappedValue.dismiss() }, label: { 
                  Image(systemName: "chevron.backward")
               })
            }
        })
    }
}

优化建议 #

• 建议把放在.background里的NavigationLink移到视图层级内部，iOS16+优先使用.navigationDestination实现导航跳转，避免非标准挂载方式导致的视图层级异常。
• 如果不需要导航栏毛玻璃效果，不要用默认的透明外观配置，必须显式指定不透明背景色，才能实现滚动到边界时内容被完全遮挡的效果。

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