SwiftUI：VStack显示时导航标题背景变透明问题求助

问题描述 #

给包含List的SwiftUI视图添加.background()修饰符修改背景色时，导航标题栏会变成透明状态，且该问题仅在视图外层使用VStack时触发。

复现代码 #

ContentView #

import SwiftUI

struct ContentView: View {
    @State var showButton: Bool

    var body: some View {
        VStack {
            NavigationStack {
                NavigationLink(
                    destination: SecondView(showButton: showButton),
                    label: {
                        Text("跳转到第二个页面")
                    })
                Toggle("显示VStack中的按钮", isOn: $showButton)
                    .padding()
            }
        }
    }
}

SecondView #

import SwiftUI

struct SecondView: View {
    @State private var isButtonVisible: Bool = false
    @State var showButton: Bool = true
    
    var body: some View {
        VStack {
            List(0..<10) { _ in
                Text("Hello World")
            }
            if showButton {
                button
            }
        }
        .navigationTitle("这是标题")
        .background(Color(.systemCyan))
    }
    
    var button: some View {
        Text("按钮")
    }
}

问题演示 #

解决方案 #

方法1：为List单独设置背景 #

把背景修饰符直接应用在List上，而非外层VStack，这样不会干扰导航栏的背景逻辑：

struct SecondView: View {
    @State private var isButtonVisible: Bool = false
    @State var showButton: Bool = true
    
    var body: some View {
        VStack {
            List(0..<10) { _ in
                Text("Hello World")
            }
            .background(Color(.systemCyan)) // 将背景移到List上
            if showButton {
                button
            }
        }
        .navigationTitle("这是标题")
    }
    
    var button: some View {
        Text("按钮")
    }
}

方法2：强制保留导航栏背景 #

如果需要整个VStack区域都显示背景色，先隐藏List的默认滚动背景，再强制设置导航栏的可见性和背景色：

struct SecondView: View {
    @State private var isButtonVisible: Bool = false
    @State var showButton: Bool = true
    
    var body: some View {
        VStack {
            List(0..<10) { _ in
                Text("Hello World")
            }
            .scrollContentBackground(.hidden) // 隐藏List默认背景
            if showButton {
                button
            }
        }
        .background(Color(.systemCyan))
        .navigationTitle("这是标题")
        .toolbarBackground(.visible, for: .navigationBar) // 强制显示导航栏背景
        .toolbarBackground(Color(.systemBackground), for: .navigationBar) // 设为系统默认背景
    }
    
    var button: some View {
        Text("按钮")
    }
}

方法3：调整视图结构（推荐） #

如果业务允许，直接用List作为根视图，把额外按钮放到导航栏的toolbar中，这样既满足需求又不会触发导航栏透明问题：

struct SecondView: View {
    @State private var isButtonVisible: Bool = false
    @State var showButton: Bool = true
    
    var body: some View {
        List(0..<10) { _ in
            Text("Hello World")
        }
        .background(Color(.systemCyan))
        .navigationTitle("这是标题")
        .toolbar {
            if showButton {
                Button("按钮") {}
            }
        }
    }
}

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