SwiftUI：NavigationView内滚动后导航栏背景丢失，需全屏红色

要实现滚动时导航栏区域也保持红色，核心是自定义导航栏背景，替代系统默认的动态背景。具体修改如下：

修改Home页面代码 #

将导航栏的默认背景替换为红色，同时强制背景始终可见：

struct Home: View {
    var body: some View {
        ZStack {
            Color.red.edgesIgnoringSafeArea(.all)
            
            ScrollView {
                // 这里放置你的滚动内容，示例添加占位文本
                ForEach(0..<20) { index in
                    Text("滚动内容 \(index)")
                        .foregroundColor(.white)
                        .padding()
                }
            }
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("Home")
                    .foregroundColor(.white) // 适配红色背景的标题颜色
            }
        }
        // 设置导航栏红色背景并强制可见
        .toolbarBackground(Color.red, for: .navigationBar)
        .toolbarBackground(.visible, for: .navigationBar)
    }
}

关键说明 #

• toolbarBackground(Color.red, for: .navigationBar)：给导航栏绑定红色背景
• toolbarBackground(.visible, for: .navigationBar)：强制导航栏背景在滚动时不自动隐藏
• navigationBarTitleDisplayMode(.inline)：让标题与导航栏背景更好融合，也可根据需求改用.large
• 标题设为白色是为了在红色背景上保证可读性，可按需调整

另外，原ContentView代码缺少routeHome状态变量，需补充定义才能正常跳转：

struct ContentView: View {
    @State private var routeHome = false // 新增状态变量
    
    var body: some View {
        NavigationView {
            ZStack {
                // 其他视图
                NavigationLink(isActive: $routeHome, destination: { Home() }, label: {
                    Text("Go to Home")
                })
            }
            .navigationBarTitle("Page1")
        }
    }
}

修改完成后，无论ScrollView是否滚动，整个页面（包括导航栏区域）都会保持红色背景。

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