在 SwiftUI 中以编程方式检测 Tab Bar 或 TabView 高度

Question

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

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() 视图和 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)
        }
    }
}

Answer 2

看来，您需要知道播放器的最大尺寸（标签栏上方的空间大小），而不是标签栏自身的高度。

使用 GeometryReader 和 PreferenceKey 是一个方便的工具

import Combine

struct Size: PreferenceKey {

    typealias Value = [CGRect]
    static var defaultValue: [CGRect] = []
    static func reduce(value: inout [CGRect], nextValue: () -> [CGRect]) {
        value.append(contentsOf: nextValue())
    }
}

struct HomeView: View {
    let txt: String
    var body: some View {
        GeometryReader { proxy in
            Text(self.txt).preference(key: Size.self, value: [proxy.frame(in: CoordinateSpace.global)])
        }
    }
}


struct ContentView: View {
    @State var playerFrame = CGRect.zero
    var body: some View {

        TabView {
            HomeView(txt: "Hello").tabItem {
                Image(systemName: "house")
                Text("A")
            }.border(Color.green).tag(1)

            HomeView(txt: "World!").tabItem {
                Image(systemName: "house")
                Text("B")
            }.border(Color.red).tag(2)

            HomeView(txt: "Bla bla").tabItem {
                Image(systemName: "house")
                Text("C")
            }.border(Color.blue).tag(3)
        }
        .onPreferenceChange(Size.self, perform: { (v) in
            self.playerFrame = v.last ?? .zero
            print(self.playerFrame)
        })
            .overlay(
                Color.yellow.opacity(0.2)
            .frame(width: playerFrame.width, height: playerFrame.height)
            .position(x: playerFrame.width / 2, y: playerFrame.height / 2)
        )
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在示例中，我使用.padding()黄色透明矩形缩小了尺寸，以确保没有任何部分可以隐藏（屏幕外）

如果需要，甚至可以计算标签栏的高度，但我无法想象是什么。

Answer 3

扩展 user3441734 的答案，您应该能够使用此 Size 来获取 TabView 和内容视图大小之间的差异。该差异就是玩家需要定位的偏移量。这是一个应该可以工作的重写版本：

import SwiftUI

struct InnerContentSize: PreferenceKey {
  typealias Value = [CGRect]

  static var defaultValue: [CGRect] = []
  static func reduce(value: inout [CGRect], nextValue: () -> [CGRect]) {
    value.append(contentsOf: nextValue())
  }
}

struct HomeView: View {
  let txt: String
  var body: some View {
    GeometryReader { proxy in
      Text(self.txt)
        .preference(key: InnerContentSize.self, value: [proxy.frame(in: CoordinateSpace.global)])
    }
  }
}

struct PlayerView: View {
  var playerOffset: CGFloat

  var body: some View {
    VStack(alignment: .leading) {
      Spacer()
      HStack {
        Rectangle()
          .fill(Color.blue)
          .frame(width: 55, height: 55)
          .cornerRadius(8.0)
        Text("Name of really cool song")
        Spacer()
        Image(systemName: "play.circle")
          .font(.title)
      }
      .padding(.horizontal)
      Spacer()
    }
    .background(Color.pink.opacity(0.2))
    .frame(height: 70)
    .offset(y: -playerOffset)
  }
}

struct ContentView: View {
  @State private var playerOffset: CGFloat = 0

  var body: some View {
    GeometryReader { geometry in
      TabView {
        HomeView(txt: "Foo")
          .tag(0)
          .tabItem {
            Image(systemName: "sun.min")
            Text("Sun")
          }

        HomeView(txt: "Bar")
          .tag(1)
          .tabItem {
            Image(systemName: "moon")
            Text("Moon")
          }

        HomeView(txt: "Baz")
          .tag(2)
          .tabItem {
            Image(systemName: "sparkles")
            Text("Stars")
          }
      }
      .ignoresSafeArea()
      .onPreferenceChange(InnerContentSize.self, perform: { value in
        self.playerOffset = geometry.size.height - (value.last?.height ?? 0)
      })
      .overlay(PlayerView(playerOffset: playerOffset), alignment: .bottom)
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}