如何在SwiftUI中扩展MapKit地图至导航栏和选项卡栏之外？

Question

我正在开发一个使用TabView和NavigationView的SwiftUI应用程序。其中一个视图负责展示来自MapKit的地图，并且应该占用所有可用空间。我希望它可以延伸到TabBar和NavigationBar之外，这样我就可以通过标准半透明材料查看地图内容，就像Apple Store应用程序中的屏幕截图一样：

Apple Store App Screenshot

我尝试在Map上使用.ignoresSafeArea()修饰符，但是然后栏没有任何背景材料，只有按钮和导航标题可见，就像这样：

Demo View Screenshot

这似乎不是我的应用程序结构特定的问题 - 我尝试创建一个新的独立视图与那两个栏，仍然得到相同的结果。以下是该示例视图的代码：

import MapKit
import SwiftUI

struct SwiftUIView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 50, longitude: 20),
        span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
    )
    
    var body: some View {
        TabView {
            NavigationView {
                Map(coordinateRegion: $region)
                    .ignoresSafeArea()
                    .navigationTitle("Map")
            }
            .tabItem {
                Label("Map", systemImage: "map")
            }
        }
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

有什么重要的东西我错过了吗？还是地图组件有 bug 吗？

- Kamil Chmielewski

---

我有完全相同的问题，你找到解决方法了吗？ - Mathieu

很抱歉，Mathieu，我没有解决这个问题。但是我发现问题的原因在于UIKit将错误的UINavigationBarAppearance应用于顶部和底部栏中。我尝试手动设置这些外观，但并没有成功。 - Kamil Chmielewski

太遗憾了，感谢你的回答。如果我找到任何信息，我会在这里发布。 - Mathieu

Answer 1

我通过添加解决了这个问题

.safeAreaInset(edge: .bottom) {
  Color.clear
    .frame(height: 0)
    .background(.ultraThinMaterial)
}

到MapView

- reubn

Answer 2

您可以通过添加ScrollView背景来解决它：

      ZStack {
      ScrollViewReader { proxy in
        ScrollView {
          Spacer()
            .frame(height: 10000)
            .id(1)
          Spacer()
            .frame(height: 10000)
            .id(2)
          Spacer()
            .frame(height: 10000)
            .id(3)
        }
        .onAppear {
          proxy.scrollTo(2)
        }
      }
      .ignoresSafeArea()
        
        Map(...)
          .ignoresSafeArea()
      }

这使得工具栏的外观符合期望 - 因为它是一个具有顶部和底部重叠的滚动视图。

- Nicolas Degen

---

谢谢，这帮助我解决了一半的问题（仅适用于选项卡栏），但是我通过在MapView中添加.navigationBarTitleDisplayMode(.inline)修饰符来完全修复它 - 根据最新的iOS导航栏标题样式，在.large显示模式下背景不会显示。 - Kamil Chmielewski

好观点！从未在大型导航栏中使用过它，也从未意识到这会成为一个问题 :) - Nicolas Degen