嵌入 UIHostingController 中的 NavigationView 具有额外的安全区域插图

Xax*_*xus 5 swift swiftui uihostingcontroller uiviewrepresentable

有人知道如何处理这个问题吗?似乎当您有一个带有 NavigationView 的 UIHostingController 时,会发生以下情况:

在此输入图像描述

注意大的灰色标签栏安全区域。

这主要是一个 UIKit 应用程序。我们正在用 swiftUI 视图替换选项卡栏中的一些选项卡。

这是我的代码:

var body: some View {
    NavigationView {
        ZStack {
            MapKitMapView(
                mapView: mapView,
                annotations: $annotations,
                polylines: $polylines,
                centerCoordinate: $centerCoordinate,
                newMapRegion: $newMapRegion,
                userTrackingMode: $userTrackingMode
            )
            .edgesIgnoringSafeArea(.all)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
            
            ButtonLayer(mapView: mapView, userTrackingMode: $userTrackingMode, showSheet: $showSheet)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .padding(.margin)
        }
        .edgesIgnoringSafeArea(.all)
        .navigationBarHidden(true)
        .sheet(isPresented: $showSheet) {
            SettingsView()
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

请原谅审查制度。我希望该应用程序保持匿名。

但本质上我的 UITabBar 是按如下方式构建的:

  • 有一个全局的 UINavigationViewController
  • UINavigationController 中的第一个也是唯一的项目是这个 UITabBar
  • UITabBar 选项卡都是以编程方式创建的。
  • 有问题的选项卡只是一个 UIHostingController,其中包含您在上面看到的 rootView 代码。

我尝试手动为 UIHostingController 设置额外的安全区域插入,以使其扩展到安全区域之外。

如果我删除 NavigationView,一切都会按预期显示和运行。

Xax*_*xus 6

我找到了解决此问题的方法。但是,我想使用纯粹的 swiftUI 解决方案,而不是下面的解决方法。所以我将这个问题保留下来,看看其他人是否有其他见解。

在检查视图层次结构调试器时,我注意到以下内容:

该视图被包装在 NotifyingMultiColumnSplitViewController 中

导航视图样式是SplitView...这是iPad样式。我实际上并没有设定我的风格。所以也许一个错误导致它默认为这个。

我尝试将 NavigationView 样式更改为 StackNavigationViewStyle()。

虽然这没有解决问题,但它确实清理了视图层次结构并将我的 UIHostingViewController 包装在正确的 UINavigationController 中。

它还将底部灰色的“安全区域”更改为白色。

这告诉我,当在 UIHostingController 中使用 NavigationView 时,它只是将您的视图包装在标准 UINavigationController 中。由于我与 UIKit 交互,也许将选项卡栏的根设置为 UINavigationController 而不是内部带有 NavigationView 的 UIHostingController 更有意义。

因此,遇到问题的选项卡现在填充有:

UINavigationController(rootViewController: UIHostingController(rootView: MyView()))

我的视图代码只是:

ZStack {
        MapKitMapView(
            mapView: mapView,
            annotations: $annotations,
            polylines: $polylines,
            centerCoordinate: $centerCoordinate,
            newMapRegion: $newMapRegion,
            userTrackingMode: $userTrackingMode
        )
        .edgesIgnoringSafeArea(.all)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        
        ButtonLayer(mapView: mapView, userTrackingMode: $userTrackingMode, showSheet: $showSheet)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .padding(.margin)
    }
    .edgesIgnoringSafeArea(.all)
    .navigationBarHidden(true)
    .sheet(isPresented: $showSheet) {
        SettingsView()
    }
Run Code Online (Sandbox Code Playgroud)

这实际上纠正了这个问题。我可以使用 NavigationLinks 毫无问题地推送视图。

我想这里要吸取的教训是:

SwiftUI 与 UIKit 的交互比我想象的要好。

我仍然不知道的是:如果 NavigationView 只是将您的视图包装在 UINavigationController 中,为什么会出现此问题?我尝试在一个干净的项目中复制它,但没有成功。因此,我怀疑我们的应用程序中自定义导航栏或选项卡栏的操作导致了此问题。

经过多次挖掘,我找不到根本原因。所以这个解决方法暂时就足够了。