Swift 5中如何设置NavigationView的全区域背景颜色

之前的写法不生效核心是两个原因：

1. 根容器VStack默认是自适应内容尺寸的，不会自动撑满整个NavigationView的可视区域，直接加背景只会覆盖内容所在的小范围区域，铺不满空白区
2. 系统导航栏默认带半透明毛玻璃层，就算下层的背景色延伸到了导航栏位置，也会被这个系统层遮挡，无法显示自定义颜色

正确实现方式 #

分iOS版本适配即可：

iOS 16+ 原生实现（推荐） #

直接给VStack设置撑满全屏幕的布局规则，再配合导航栏工具栏背景修饰符就能实现全区域同色，代码如下：

NavigationView {
    VStack {
        // 原有业务代码保持不变
        Text("Choose ingredients")
            .font(.title)
        Text("to search for, ")
            .font(.title)
        Text("each on their own line:")
            .font(.title)
        TextEditor(text: $userInput)
            .frame(width: 300, height: 200)
            .overlay(
                    RoundedRectangle(cornerRadius: 16)
                        .stroke(.gray, lineWidth: 2)
                )
            .navigationTitle("Scan Labels")
            .navigationBarTitleDisplayMode(.inline)
        Button(action: {
            isShowingScanner = true
        }, label: {
            Label("Scan", systemImage: "barcode.viewfinder")
                .padding()
                .font(.bold(.title2)())
                .overlay(
                        RoundedRectangle(cornerRadius: 16)
                            .stroke(.blue, lineWidth: 2)
                    )
        })
        .padding()
    }
    // 让VStack撑满整个可用区域
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    // 设置内容区域背景，忽略安全区铺满
    .background(.cyan.ignoresSafeArea()) // 替换为你需要的背景色
    // 强制显示导航栏背景，替换默认毛玻璃效果
    .toolbarBackground(.visible, for: .navigationBar)
    // 导航栏背景色和内容区域保持一致
    .toolbarBackground(.cyan, for: .navigationBar)
}

iOS 15 及更低版本适配 #

低版本没有原生的SwiftUI导航栏背景修饰符，需要通过UIKit的UINavigationBar外观配置修改导航栏默认样式，把下面的代码加到页面的init方法或者App启动入口即可：

init() {
    let navBarConfig = UINavigationBarAppearance()
    // 取消导航栏默认半透明效果
    navBarConfig.configureWithOpaqueBackground()
    // 设置导航栏背景色和页面内容区一致
    navBarConfig.backgroundColor = UIColor(.cyan) // 替换为你需要的背景色
    // 配置应用到所有导航栏状态
    UINavigationBar.appearance().standardAppearance = navBarConfig
    UINavigationBar.appearance().scrollEdgeAppearance = navBarConfig
}

额外注意 #

如果需要TextEditor也和整体背景融合，iOS16+可以给TextEditor加.scrollContentBackground(.hidden)修饰符隐藏默认的白色背景；低版本可以通过UITextView.appearance().backgroundColor = .clear全局设置TextEditor透明。

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