ScrollView滚动时NavigationBar闪烁问题的原因及解决方法咨询

原因分析 #

• 闪烁现象源于ScrollView滚动时，系统默认的导航栏背景透明度过渡逻辑与自定义toolbarBackground颜色之间的渲染冲突。当滚动触发导航栏状态切换时，自定义颜色和系统默认的背景/透明状态交替过程中产生了视觉闪烁。

解决方法 #

核心思路是让导航栏背景保持固定的自定义颜色，避免系统自动的透明度变化，以下是两种可行方案：

方案一：强制导航栏背景始终可见 #

通过设置toolbarBackground(.visible)和.toolbar(.visible)，禁用导航栏的滚动透明度变化：

struct SwiftUIView: View {
    let color = Color(red: 38/255, green: 46/255, blue: 48/255)
    var body: some View {
        ZStack {
            color.ignoresSafeArea()
            ScrollView {
                Text("Test")
                    .padding(.vertical, 100) // 增加内边距便于测试滚动
            }
            .toolbarBackground(color, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar) // 强制背景持续显示
            .toolbar(.visible, for: .navigationBar) // 确保导航栏始终处于可见状态
            .scrollDismissesKeyboard(.interactively)
        }
    }
}

方案二：通过UIKit外观配置全局设置 #

利用UIKit的UINavigationBarAppearance从底层配置导航栏背景，彻底避免SwiftUI层面的渲染冲突：

struct SwiftUIView: View {
    let color = Color(red: 38/255, green: 46/255, blue: 48/255)
    
    init() {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.backgroundColor = UIColor(color)
        navBarAppearance.shadowColor = .clear // 可选：移除导航栏底部阴影线
        // 应用到标准状态和滚动到边缘的状态
        UINavigationBar.appearance().standardAppearance = navBarAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
    }
    
    var body: some View {
        ZStack {
            color.ignoresSafeArea()
            ScrollView {
                Text("Test")
                    .padding(.vertical, 100)
            }
            .scrollDismissesKeyboard(.interactively)
        }
    }
}

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