SwiftUI 地图覆盖工具栏/导航栏的外观？

Question

当使用

Map

添加

MapKit

时，这会改变 TabBar 的外观，特别是为工具栏提供带阴影的半透明背景；默认的 iOS 风格。

我尝试将以下修改器添加到地图中

.toolbarBackground(Color("White"), for: .navigationBar)

但是导航工具栏还是有阴影，TabBar默认的半透明背景色有阴影。

根

init() {
    // this is not the same as manipulating the proxy directly
    let appearance = UINavigationBarAppearance()
    
    // this overrides everything you have set up earlier.
    appearance.configureWithTransparentBackground()
    
    appearance.shadowColor = .clear
    
    //In the following two lines you make sure that you apply the style for good
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
    UINavigationBar.appearance().standardAppearance = appearance
    
    
    UITabBar.appearance().barTintColor = UIColor.white
    UITabBar.appearance().backgroundColor = UIColor.white
    UITabBar.appearance().shadowImage = UIImage()
    UITabBar.appearance().backgroundImage = UIImage()
    
    UINavigationBar.appearance().isTranslucent = false
    UIToolbar.appearance().backgroundColor = UIColor.white
    UIToolbar.appearance().isTranslucent = false
    UIToolbar.appearance().setShadowImage(UIImage(), forToolbarPosition: .any)
}

struct MainView: View {
    var body: some View {
        TabView {
            ContentView()
                .tabItem {
                    Label("Menu", systemImage: "list.dash")
                }
        }
    }
}

选项卡栏为纯白色，没有阴影，导航栏也是如此。

内容视图

struct ContentView: View {

@State var position = MapCameraPosition.region(
    MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 51.510357, longitude: -0.116773),
        latitudinalMeters: 500, longitudinalMeters: 500)
)

    var body: some View {
        NavigationStack() {
            NavigationLink(destination: MapView(position: $position)) {
              Text("Hello, World!")
            }
        }
        .navigationTitle("Content")
    }
}

地图视图

struct MapView: View {
    @Binding var position:  MapCameraPosition

    var body: some View {
        Map(position: $position)
            .mapControlVisibility(.hidden)
            .edgesIgnoringSafeArea(.bottom)
            .allowsHitTesting(false)
            .frame(maxWidth: .infinity)
            .frame(height: 414)
            .clipped()
    }
}

我查看了文档但找不到任何内容。 https://developer.apple.com/documentation/mapkit/map

Answer 1

1.应用纯色

要在条形上使用纯色，您必须确保它既是

colored

又是

visible

，使用：

.toolbarBackground(.visible, for: .tabBar)
.toolbarBackground(.white, for: .tabBar)

另请注意，配置必须应用于

Navigation

或

Tab

视图内，并且不能应用于其自身！

例如，我已将它们涂抹在内心深处的

Map

：

2.去除阴影（又名发际线）

不幸的是，Swiftui 中没有直接的方法来隐藏这些阴影。但你可以通过传递

hidden

:

同时隐藏背景颜色和阴影

.toolbarBackground(.visible, for: .tabBar)
.toolbarBackground(.white, for: .tabBar)

3.在

invisible

栏后面添加颜色

您可以添加忽略所有安全区域的背景颜色并减去安全区域以使其显示为条形的背景：

ZStack {
    Color(.red).ignoresSafeArea()
    Rectangle().blendMode(.destinationOut)
}
.compositingGroup()

✅ 结论

当然，您可以使用

.white

颜色与

method 3

组合来实现您最初要求的：

---

PS：完全摆脱你编写的`init`方法！

PS：别忘了检查您对深色模式的需求！如果您需要条形与当前配色方案（浅色/深色）匹配，您可以简单地使用

method 2