如何去除SwiftUI导航栏半透明效果 使其颜色与下方区域一致

以下为不同iOS版本对应的实现方案：

iOS 16及以上版本 #

使用SwiftUI原生的toolbarBackground修饰符即可直接控制导航栏背景，关闭半透明效果：

NavigationStack {
    // 你的页面主体内容
    List {
        Text("内容项1")
        Text("内容项2")
    }
    .navigationTitle("页面标题")
    // 关键配置：指定导航栏背景色，和下方页面背景色保持一致
    .toolbarBackground(.white, for: .navigationBar)
    // 强制显示背景，避免滚动时自动切换为半透明
    .toolbarBackground(.visible, for: .navigationBar)
    // 如需完全隐藏导航栏背景，可替换为下面这行
    // .toolbarBackground(.hidden, for: .navigationBar)
}

将代码中的.white替换为你页面实际使用的背景色，即可完全消除导航栏和下方区域的色差。

iOS 13~15版本 #

需要通过UIKit的导航栏外观配置实现，分为全局配置和单页面配置两种：

全局配置（全App生效） #

在App的入口初始化方法中添加配置代码：

init() {
    let navAppearance = UINavigationBarAppearance()
    // 配置为不透明背景
    navAppearance.configureWithOpaqueBackground()
    navAppearance.backgroundColor = .white // 替换为你的目标背景色
    navAppearance.shadowColor = .clear // 可选：移除导航栏底部分割线
    // 同时配置普通状态和滚动到边缘的状态，避免滚动时出现半透明
    UINavigationBar.appearance().standardAppearance = navAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
}

单页面配置（仅当前页面生效） #

在页面的onAppear和onDisappear中分别设置和还原样式：

@State private var originalNavAppearance: UINavigationBarAppearance?

var body: some View {
    NavigationView {
        List {
            Text("内容项1")
        }
        .navigationTitle("页面标题")
        .onAppear {
            // 保存原有样式
            originalNavAppearance = UINavigationBar.appearance().standardAppearance
            // 设置当前页面的导航栏样式
            let navAppearance = UINavigationBarAppearance()
            navAppearance.configureWithOpaqueBackground()
            navAppearance.backgroundColor = .white
            navAppearance.shadowColor = .clear
            UINavigationBar.appearance().standardAppearance = navAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = navAppearance
        }
        .onDisappear {
            // 离开页面时还原原有样式
            if let original = originalNavAppearance {
                UINavigationBar.appearance().standardAppearance = original
                UINavigationBar.appearance().scrollEdgeAppearance = original
            }
        }
    }
}

常见问题排查 #

• 如果配置后滚动时还是出现半透明，优先检查是否同时设置了standardAppearance和scrollEdgeAppearance两个属性，仅设置其中一个会导致滚动到顶部时样式自动切换。
• 如果不需要显示导航栏，可直接使用.toolbar(.hidden, for: .navigationBar)修饰符完全隐藏导航栏，也不会出现半透明色差问题。

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