NavigationView嵌套List时大标题与导航栏背景色冲突问题求助

问题现象 #

在NavigationView中嵌套List组件时，若通过toolbarBackground设置导航栏背景色并强制其可见，原本正常显示的大标题会消失。

正常运行代码（ZStack场景） #

此时大标题可正常显示：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Text("World")
            }
            .navigationTitle("Hello")
            .toolbarBackground(Color.pink.opacity(1),for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

#Preview {
    ContentView()
}

异常代码（List场景） #

替换为List后，大标题消失：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("World")
            }
            .navigationTitle("Hello")
            .toolbarBackground(Color.pink.opacity(1),for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

#Preview {
    ContentView()
}

成因分析 #

List自带滚动交互特性，SwiftUI默认会让导航栏与List的滚动状态联动。当设置toolbarBackground(.visible)强制导航栏背景显示时，List的存在会触发导航栏的自适应逻辑，自动将大标题切换为行内（inline）标题样式，导致大标题消失。而ZStack无滚动特性，不会触发该联动逻辑。

解决方案 #

方案1：强制指定大标题显示模式 #

通过navigationBarTitleDisplayMode(.large)明确要求导航栏始终显示大标题，不受List滚动状态影响：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("World")
            }
            .navigationTitle("Hello")
            .navigationBarTitleDisplayMode(.large) // 强制大标题模式
            .toolbarBackground(Color.pink.opacity(1), for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

#Preview {
    ContentView()
}

方案2：隐藏List的滚动背景 #

通过scrollContentBackground(.hidden)关闭List的默认滚动背景，切断其与导航栏的联动逻辑：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Text("World")
            }
            .scrollContentBackground(.hidden) // 隐藏List默认背景
            .navigationTitle("Hello")
            .toolbarBackground(Color.pink.opacity(1), for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
    }
}

#Preview {
    ContentView()
}

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