swift - 以编程方式检测 SwiftUI 中的 Tab Bar 或 TabView 高度

Question

我有一个 SwiftUI 应用程序，它将有一个 float 播客播放器，类似于 Apple Music 播放器，它位于标签栏上方，并在播放器运行时持续存在于所有标签和 View 中。我还没有找到一个很好的方法来定位播放器，使其与标签栏齐平，因为标签栏的高度会根据设备而变化。我发现的主要问题是我必须如何将播放器放置在应用程序 Root View 中的叠加层或 ZStack 中，而不是在 TabView 本身中。由于我们无法自定义 TabView 布局的 View 层次结构，因此无法在 TabBar 本身及其上方 View 的内容之间注入(inject) View 。我的基本代码结构:

TabView(selection: $appState.selectedTab){
  Home()
  .tabItem {
    VStack {
        Image(systemName: "house")
        Text("Home")
    }
  }
  ...
}.overlay(
  VStack {
    if(audioPlayer.isShowing) {
      Spacer()
      PlayerContainerView(player: audioPlayer.player)
      .padding(.bottom, 58)
      .transition(.moveAndFade)
    }
  })

这里的主要问题是 PlayerContainerView 的位置是硬编码的，填充为 58，以便清除 TabView。如果我可以检测到 TabView 的实际帧高度，我可以针对给定的设备全局调整它，我会没事的。有谁知道如何可靠地做到这一点？或者您是否知道如何将 PlayerContainerView 放置在 TabView 本身中，以便在切换显示时它仅显示在 Home() View 和 Tab Bar 之间？对于任何反馈，我们都表示感谢。

Answer 1

由于官方允许并记录到 UIKit 的桥接，因此可以在需要时从那里读取所需的信息。

这是直接从 UITabBar 读取标签栏高度的可能方法

// Helper bridge to UIViewController to access enclosing UITabBarController
// and thus its UITabBar
struct TabBarAccessor: UIViewControllerRepresentable {
    var callback: (UITabBar) -> Void
    private let proxyController = ViewController()

    func makeUIViewController(context: UIViewControllerRepresentableContext<TabBarAccessor>) ->
                              UIViewController {
        proxyController.callback = callback
        return proxyController
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<TabBarAccessor>) {
    }

    typealias UIViewControllerType = UIViewController

    private class ViewController: UIViewController {
        var callback: (UITabBar) -> Void = { _ in }

        override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            if let tabBar = self.tabBarController {
                self.callback(tabBar.tabBar)
            }
        }
    }
}

// Demo SwiftUI view of usage
struct TestTabBar: View {
    var body: some View {
        TabView {
            Text("First View")
                .background(TabBarAccessor { tabBar in
                    print(">> TabBar height: \(tabBar.bounds.height)")
                    // !! use as needed, in calculations, @State, etc.
                })
                .tabItem { Image(systemName: "1.circle") }
                .tag(0)
            Text("Second View")
                .tabItem { Image(systemName: "2.circle") }
                .tag(1)
        }
    }
}