如何让NavigationStack内列表与顶部Toolbar的空白匹配背景色

你当前通过给List添加.padding(.top, 50)实现了与顶部Toolbar的间距，但空白区域显示白色，原因是这个空白属于NavigationStack的默认背景区域，未和你需要的屏幕背景色统一。以下两种方案可以解决这个问题：

方案一：统一NavigationStack背景色 #

直接给NavigationStack设置背景色，让顶部空白区域继承该颜色，代码修改如下：

struct ContentView: View {
    let words = ["Hello", "World", "SwiftUI", "OpenAI", "ChatGPT"]
    // 可根据需求替换为你需要的屏幕背景色
    let screenBackgroundColor = Color(UIColor.systemBackground)
    
    var body: some View {
        NavigationStack {
            List(words, id: \.self) { word in
                NavigationLink(destination: AnotherView()) {
                    Text(word)
                }
            }
            .padding(.top, 50)
            .listStyle(.insetGrouped)
            .listRowInsets(EdgeInsets())
            .navigationTitle("Words")
            .toolbarBackground(.yellow, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbar {
                Text("something")
            }
        }
        .background(screenBackgroundColor)
        .ignoresSafeArea() // 确保背景色覆盖整个屏幕范围
    }
}

方案二：用List Header填充间距 #

如果不想修改整个NavigationStack的背景，可在List顶部添加一个高度为50的Header视图，让它的颜色与List分组背景一致，视觉上实现统一：

struct ContentView: View {
    let words = ["Hello", "World", "SwiftUI", "OpenAI", "ChatGPT"]
    
    var body: some View {
        NavigationStack {
            List {
                // 创建与List分组背景色一致的占位Header
                Color(UIColor.systemGroupedBackground)
                    .frame(height: 50)
                    .listRowInsets(EdgeInsets())
                
                ForEach(words, id: \.self) { word in
                    NavigationLink(destination: AnotherView()) {
                        Text(word)
                    }
                }
            }
            .listStyle(.insetGrouped)
            .listRowInsets(EdgeInsets())
            .navigationTitle("Words")
            .toolbarBackground(.yellow, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbar {
                Text("something")
            }
        }
    }
}

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