SwiftUI修改NavigationStack默认背景色：无需逐个设置NavigationLink背景

你不需要为每个navigationDestination的目标视图单独设置背景色，可以通过以下两种方式统一处理：

方案一：创建通用背景包装视图 #

定义一个可复用的包装视图，将所有目标视图的内容放入其中，统一设置背景色：

import SwiftUI

// 通用背景包装器
struct BackgroundWrapper<Content: View>: View {
    let content: Content
    let backgroundColor: Color
    
    // 默认使用红色背景，也可自定义颜色
    init(backgroundColor: Color = .red, @ViewBuilder content: () -> Content) {
        self.backgroundColor = backgroundColor
        self.content = content()
    }
    
    var body: some View {
        ZStack {
            // 背景色覆盖安全区域
            backgroundColor.ignoresSafeArea()
            // 展示目标内容
            content
        }
    }
}

// 修改原视图代码
struct TryAvoidSettingBackgroundColorForEveryNavigationLink: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Root View")
                    .padding()
                    .background(Color.green)
                
                NavigationLink("Go to Detail", value: "Detail View")
                    .padding()
            }
            // 根页面也用包装器逻辑设置背景
            .background(Color.red.ignoresSafeArea())
            .navigationDestination(for: String.self) { value in
                BackgroundWrapper {
                    Text(value)
                        .padding()
                }
            }
        }
    }
}

#Preview {
    TryAvoidSettingBackgroundColorForEveryNavigationLink()
}

方案二：利用View扩展统一添加背景 #

给View添加扩展方法，快速为任意视图添加统一背景：

import SwiftUI

// 扩展View，添加导航页面背景方法
extension View {
    func navigationPageBackground(color: Color = .red) -> some View {
        ZStack {
            color.ignoresSafeArea()
            self
        }
    }
}

// 修改原视图代码
struct TryAvoidSettingBackgroundColorForEveryNavigationLink: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Root View")
                    .padding()
                    .background(Color.green)
                
                NavigationLink("Go to Detail", value: "Detail View")
                    .padding()
            }
            .navigationPageBackground()
            .navigationDestination(for: String.self) { value in
                Text(value)
                    .padding()
                    .navigationPageBackground()
            }
        }
    }
}

#Preview {
    TryAvoidSettingBackgroundColorForEveryNavigationLink()
}

为什么直接在NavigationStack/根视图设置不生效？ #

NavigationStack的每个导航页面都是独立的视图层级，根视图的背景仅作用于初始页面；系统会为导航到的子页面默认添加系统背景，因此需要在子页面的视图层级内覆盖背景样式。

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