SwiftUI中如何禁用向下滚动时大导航标题吸附ScrollView的行为

问题表现 #

向下拖拽ScrollView时，大导航标题默认吸附在滚动内容上层，滚动过程中会覆盖遮挡其他视图，需要禁用该默认交互。

解决方案 #

根据项目支持的最低iOS版本选择对应实现：

• iOS 16+ 原生方案
  直接通过SwiftUI原生修饰符强制导航栏常驻不透明背景，让滚动内容不再穿透到导航栏层级下：

  struct ContentView: View {
      var body: some View {
          NavigationStack {
              ScrollView {
                  // 在这里放置你的滚动内容
                  ForEach(0..<30) { index in
                      Text("测试行 \(index)")
                          .padding()
                          .frame(maxWidth: .infinity, alignment: .leading)
                  }
              }
              .navigationTitle("页面大标题")
              .navigationBarTitleDisplayMode(.large)
              // 核心配置：强制导航栏始终显示背景
              .toolbarBackground(.visible, for: .navigationBar)
              .toolbarBackground(.background, for: .navigationBar)
          }
      }
  }
  

  如果需要自定义导航栏颜色，直接替换toolbarBackground的内容参数即可，例如传入自定义Color值。

• iOS 13~15 兼容方案
  低版本系统没有对应SwiftUI修饰符，通过UIKit的导航栏配置关闭半透明穿透效果即可：

  struct ContentView: View {
      init() {
          let navBarAppearance = UINavigationBarAppearance()
          // 初始化不透明背景配置
          navBarAppearance.configureWithOpaqueBackground()
          navBarAppearance.backgroundColor = .systemBackground
          // 配置应用到所有导航栏状态
          UINavigationBar.appearance().standardAppearance = navBarAppearance
          UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
          UINavigationBar.appearance().compactAppearance = navBarAppearance
          // 关闭半透明属性，让导航栏占据实际布局空间，不再悬浮在内容上方
          UINavigationBar.appearance().isTranslucent = false
      }
      
      var body: some View {
          NavigationView {
              ScrollView {
                  // 滚动内容
              }
              .navigationTitle("页面大标题")
              .navigationBarTitleDisplayMode(.large)
          }
      }
  }
  

以上方案对List、LazyVStack/LazyHStack嵌入滚动视图的场景同样生效，配置完成后滚动内容会自动从导航栏底部开始布局，不会再出现大标题遮挡内容的问题。

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