SwiftUI中包含Map的视图导航栏背景颜色异常问题

嗨，我来帮你搞定这个问题～你说得完全没错，就是Map组件导致的导航栏背景异常！

问题根源 #

Map默认会延伸渲染到安全区域之外，包括导航栏和TabBar的下方，这就使得这些栏的背景变成了Map内容的模糊效果；而你的SettingsView里没有Map，导航栏自然显示的是List默认的纯色灰色背景。

解决方案（满足你保留折叠半透明效果的需求） #

这里有几个靠谱的方法，你可以根据自己的需求选：

方法1：限制Map的渲染范围（最直接）

给Map添加背景色和裁剪修饰符，让它只在Section的范围内显示，不延伸到导航栏下方：

import SwiftUI
import MapKit

struct Locations: View {
    var body: some View {
        NavigationStack{
            List{
                Section{
                    Map()
                        .background(Color(.systemGroupedBackground)) // 匹配List默认背景色
                        .clipped() // 裁剪超出Section的部分
                }
            }
            .navigationTitle("Locations")
            .navigationBarTitleDisplayMode(.automatic)
        }
    }
}

方法2：全局统一导航栏样式（一劳永逸）

如果希望整个App的导航栏都保持一致的List默认样式，可以在视图的onAppear里设置导航栏外观，这样即使Map延伸到下方，也会被导航栏的默认背景覆盖：

import SwiftUI
import MapKit

struct Locations: View {
    var body: some View {
        NavigationStack{
            List{
                Section{
                    Map()
                }
            }
            .navigationTitle("Locations")
            .navigationBarTitleDisplayMode(.automatic)
            .onAppear {
                let appearance = UINavigationBarAppearance()
                appearance.configureWithDefaultBackground() // 启用默认背景
                // 同时设置标准状态和滚动边缘状态的外观
                UINavigationBar.appearance().standardAppearance = appearance
                UINavigationBar.appearance().scrollEdgeAppearance = appearance
            }
        }
    }
}

方法3：限制Map的高度

如果Map不需要占满整个Section，也可以用containerRelativeFrame或者固定高度来约束它，避免延伸到导航栏：

Map()
    .containerRelativeFrame(.vertical) { size, _ in
        size * 0.6 // 按比例设置高度，可根据需求调整
    }
    .clipped()

为什么这些方法有效？ #

这些方法要么直接阻止Map渲染到导航栏下方，要么让导航栏使用默认的纯色背景覆盖Map内容，同时完全保留了导航栏滚动折叠时的半透明效果，完美符合你的需求～

备注：内容来源于stack exchange，提问作者helloimbrando