如何让UIViewControllerRepresentable使用可搜索

Question

我在让一个UIViewControllerRepresentable包装一个UIPageViewController来很好地处理SwiftUI方面一直有问题。具体来说，当searchable处于视图层次结构中时，我无法使UIViewControllerRepresentable修饰符正常工作。如果我用一个UIViewControllerRepresentable替换为一个TabView，那么这个修饰符就能正常工作。

下面是一些示例代码：

import SwiftUI

struct ContentView: View {
  @State private var search = ""

  var body: some View {
    NavigationView {
      ControllerPager()
        .navigationTitle("Title")
    }
    .searchable(text: $search)
  }
}

struct ControllerPager: UIViewControllerRepresentable {
  func makeUIViewController(context: Context) -> UIPageViewController {
    UIPageViewController(
      transitionStyle: .scroll, navigationOrientation: .horizontal)
  }

  func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
    pageViewController.setViewControllers(
      [UIHostingController(rootView: Page())],
      direction: .forward,
      animated: true)
  }
}

struct NativePager: View {
  var body: some View {
    TabView {
      Page()
    }
    .tabViewStyle(.page(indexDisplayMode: .never))
  }
}

struct Page: View {
  var body: some View {
    List {
      ForEach(0..<100) { i in
        Text("\(i)")
      }
    }
  }
}

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

使用这段代码(我不使用TabView)，searchable框不会出现在NavigationView中。如果我用ControllerPager()替换NativePager()，它就会这样做。

对于那些想知道为什么我要使用UIViewControllerRepresentable而不是TabView的人来说，我需要一个动态数据源来支持UIPageViewController，当用户在页面之间滑动时，它会更新。我尝试了这个先前的答案，但是当用户在页面之间滑动时，TabView的行为很奇怪，因为我正在改变状态。

谢谢你的帮助！

Answer 1

我找到了一个解决办法：

  var body: some View {
    NavigationView {
      ZStack {
        Text(" ")

        ControllerPager()
          .navigationTitle("Title")
        }
    }
    .searchable(text: $search)
  }

我使用了Xcode的Capture层次结构调试，发现ControllerPager和NativePager都添加了一个UISearchBar，但是ControllerPager的高度更大，似乎覆盖在UISearchBar上。

在阅读关于SwiftUI布局的教程时，我发现UIViewControllerRepresentable需要一个frame来正确地使用SwiftUI布局系统。有些人通过在他们的UIViewControllerRepresentable中添加固定的高度框来解决这个问题，但是对于应该占用足够多空间的东西来说，这似乎有点麻烦。为了能够计算出一个合适的框架，我在GeometryReader中包装了不同的部分，但是它总是会返回一个太大的高度。

当时我很好奇苹果是如何在他们的与UIKit接口教程中解决这个问题的。我最初忽略的关键是，他们的最终解决方案使用ZStack和UIViewControllerRepresentable包装UIPageViewController ，使用UIViewRepresentable包装UIPageControl。因此，ZStack可以正确地与SwiftUI布局系统接口，UIViewControllerRepresentable将简单地继承为其计算的框架。

一个以单个空格作为内容的Text有点麻烦，但我发现我需要一个可以“呈现”的元素。如果我设置了.opacity(0)，使用了一个空的VStack，或者使用了类似于Color(uiColor: .clear)的东西，它就不能工作了。即使有了像Text("hello")这样的东西，即使我在页面之间滑动，文本也永远不会被看到。

现在我已经掌握了实际问题的处理方法，我将寻找更少麻烦的解决方案，但就目前而言，这是可行的。