iOS 16中SwiftUI的NavigationView背景颜色异常问题求助

方案1：使用iOS 16+推荐的NavigationStack替代NavigationView #

Apple在iOS16推出了新的NavigationStack组件，替代旧的NavigationView，它修复了旧组件的诸多布局bug，包括这类背景显示异常问题。修改后的代码如下：

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        NavigationStack { // 替换为NavigationStack
            VStack {
                TextField("Edit field", text: $text)
                    .textFieldStyle(RoundedBorderTextFieldStyle())

                NavigationLink(destination: Text("Navigation target")) {
                    HStack {
                        Image(systemName: "link")
                        Text("Navigation Link")
                    }
                }
                .padding(30)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.gray)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

方案2：保留NavigationView的兼容修复 #

如果需要兼容iOS15及以下版本，继续使用NavigationView，可以通过以下方式修复：

• 用ZStack将背景视图放在最底层，确保覆盖全屏
• 同时给NavigationView本身设置背景，做双重保障

修改后的代码示例：

import SwiftUI

struct ContentView: View {
    @State private var text: String = ""
    
    var body: some View {
        NavigationView {
            ZStack {
                Color.gray
                    .ignoresSafeArea() // 忽略安全区域，覆盖全屏
                
                VStack {
                    TextField("Edit field", text: $text)
                        .textFieldStyle(RoundedBorderTextFieldStyle())

                    NavigationLink(destination: Text("Navigation target")) {
                        HStack {
                            Image(systemName: "link")
                            Text("Navigation Link")
                        }
                    }
                    .padding(30)
                }
            }
        }
        .background(Color.gray)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

方案3：全局统一设置导航栏背景（可选） #

如果需要全局统一所有导航视图的背景风格，可以通过UIKit外观配置实现，在App的初始化方法中添加：

import SwiftUI

@main
struct YourApp: App {
    init() {
        UINavigationBar.appearance().backgroundColor = UIColor.gray
        UINavigationBar.appearance().isTranslucent = false
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

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