访问另一个 UIViewRepresentable 的控制器或 UIView

Question

UIViewRepresentable 对于将 UIKit 视图引入 SwiftUI 上下文很有用。它们的主要限制是 UIKit 方面的实例化不在我们的控制之下 - 它根据 SwiftUI 子系统的需要发生。

当两个 UIView 需要相互了解才能进行协作时，这会造成困难。例如MKMapView 和MKCompassButton。后者需要前者的实例与之同步。

在单独的UIViewRepresentable 值之间传递这样的引用是很困难的，因为我们无法直接使用控制器或视图。

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView { .init() }
}
struct CompassButton: UIViewRepresentable {
    func makeUIView(context: Context) -> MKCompassButton { .init(mapView: ???) }
}
/// or
struct MapView: UIViewRepresentable {
    let compass = CompassButton()

    func makeUIView(context: Context) -> MKMapView { .init() }

    struct CompassButton: UIViewRepresentable {
        func makeUIView(context: Context) -> MKCompassButton { .init(mapView: ???) }
    }
}

有谁知道一种机制，我们可以通过这种机制允许两个基于UIViewRepresentable 的 SwiftUI 视图使用它们的底层 UIKit 视图进行协作，可能是通过共享控制器实例或其他方式？

我的第一个想法是将控制器的实例化移出makeController 并直接作为var 移入var，但这可能会干扰控制器的SwiftUI 生命周期管理。

Answer 1

要直接解决您的问题，您可以将状态保持在两个视图（即父级）之上的级别。例如，这有效：

class AppState: ObservableObject {
    var mapView = MKMapView()
}

@main
struct CustomCardViewApp: App {
    @StateObject var appState = AppState()
    
    var body: some Scene {
        WindowGroup {
            ContainerView(mapView: appState.mapView)
        }
    }
}

struct MapView: UIViewRepresentable {
    var mapView: MKMapView
    
    func makeUIView(context: Context) -> MKMapView { mapView }
    func updateUIView(_ uiView: MKMapView, context: Context) { }
}

struct CompassButton: UIViewRepresentable {
    var mapView: MKMapView
    
    func makeUIView(context: Context) -> MKCompassButton {
        let button = MKCompassButton(mapView: mapView)
        button.compassVisibility = .visible
        return button
    }
    func updateUIView(_ uiView: MKCompassButton, context: Context) { }
}

struct ContainerView: View {
    var mapView: MKMapView
    
    var body: some View {
        ZStack {
            MapView(mapView: mapView)
            CompassButton(mapView: mapView)
                .fixedSize()
        }
    }
}

话虽如此，如果您真的不需要单独引用指南针视图，您可以简化并将其作为子视图添加到MKMapView：

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView()
        let button = MKCompassButton(mapView: mapView)
        button.compassVisibility = .visible
        button.frame.origin = .init(x: 10, y: 10)
        mapView.addSubview(button)
        return mapView
    }
    func updateUIView(_ uiView: MKMapView, context: Context) { }
}

struct ContainerView: View {
    var body: some View {
        ZStack {
            MapView()
        }
    }
}

Answer 2

除了为什么您需要在不使用协调员，包装器或其他方法，这是您的答案：

1. 添加一种从外部获取依赖项的方法：

   struct CompassButton: UIViewRepresentable {
       weak var mapView: MKMapView? // ? Get it from outside (weak for avoiding leak)
       func updateUIView(_ uiView: MKCompassButton, context: Context) { uiView.compassVisibility = .visible }
       func makeUIView(context: Context) -> MKCompassButton { .init(mapView: mapView) }
   }
   

   2. 使依赖项对外部可见：

   struct MapView: UIViewRepresentable {
       private (set) var mapView: MKMapView = .init() // ? make it visible
       func updateUIView(_ uiView: MKMapView, context: Context) { }
       func makeUIView(context: Context) -> MKMapView { mapView }
   }
   

   3. 保留参考并稍后使用：

   struct ContentView: View {
       let mapView = MapView() // ? Keep a reference
       var body: some View {
           ZStack {
               mapView
               CompassButton(mapView: mapView.mapView) // ? Use the reference
                   .fixedSize()
           }
       }
   }
   

   我认为这不是您应该实现的方式，但我认为这就是您正在寻找的

Answer 3

您无法访问UIViewRepresentable 的内部结构，如果您坚持使用UIView 变量，您将开始收到非常流行的“不允许更新视图时更新视图错误”。 Apple 只是不允许使用 SwiftUI 访问内部结构。

创建一个在 UIKit 和 SwiftUI 之间共享的通用“ViewModel”/Controller 是最简单的方法。 UIView 将存在于 UIViewController 中，因此您可以获得 UIKit 的所有好处。

import SwiftUI
import MapKit
///Source of truth for both SwiftUI and UIKit
class MapCompassViewModel: ObservableObject, MapController{
    var provider: (any MapProvider)!
    
    func toggleCompassVisibility(){
        provider.toggleCompassVisibility()
    }
    func addCompass(){
        provider.addCompass()
    }
}

您可以使用protocols 隐藏内部实现。

protocol MapProvider{
    var map : MKMapView {get set}
    func toggleCompassVisibility()
    func addCompass()
}
protocol MapController{
    var provider: (any MapProvider)! {get set}
}

UI 部分只是一个View、UIViewControllerRepresentable 和一个UiViewController。

///Plain SwiftUI View
struct MapCompassView: View {
    @StateObject var vm: MapCompassViewModel = .init()
    var body: some View {
        VStack{
            //This is needed to for the very first frame,
            //when we are waiting for the provider
            //to be set for the UIViewController
            if vm.provider != nil{
                Compass_UI(vm: vm)
                    .frame(width: 20, height: 20)
            }
            Button("Show/Hide compass", action: vm.toggleCompassVisibility)
            MapCompass_UI(vm: vm)
        }
    }
}
///Convers UIKit `UIViewController` to a `UIViewControllerRepresentable`
struct Compass_UI: UIViewRepresentable{
    let vm: any MapController
    func makeUIView(context: Context) -> some UIView {
        let m = MKCompassButton(mapView: vm.provider.map)
        m.frame.origin = .init(x: 40, y: 20)
        m.compassVisibility = .visible
        return m
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
        
    }
}
///Converts UIKit `UIViewController` to a `UIViewControllerRepresentable`
struct MapCompass_UI: UIViewControllerRepresentable{
    let vm: any MapController
    func makeUIViewController(context: Context) -> some UIViewController {
        MapCompassViewController(vm: vm)
    }
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        
    }
}
///Regular `UIViewController` that uses `MapCompassViewModel`
///This can be as complex as needed.
class MapCompassViewController: UIViewController, MapProvider{
    var vm: any MapController
    lazy var map: MKMapView = {
        let m = MKMapView(frame: .zero)
        m.showsCompass = false
        return m
    }()
    lazy var compass: MKCompassButton = {
        let m = MKCompassButton(mapView: map)
        m.frame.origin = .init(x: 20, y: 20)
        m.compassVisibility = .visible
        return m
    }()
    init(vm: any MapController) {
        self.vm = vm
        super.init(nibName: nil, bundle: nil)
        //Critical connection between SwiftUI and UIKit
        self.vm.provider = self
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        //Add map
        view.addSubview(map)
        //Pin map to edges
        map.translatesAutoresizingMaskIntoConstraints = false
        map.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        map.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        map.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        map.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        //Add compass
        map.addSubview(compass)
    }
    func toggleCompassVisibility(){
        compass.compassVisibility = compass.compassVisibility == .visible ? .hidden : .visible
    }
    func addCompass() {
        print("(#function) :: add your compass code")
    }
    
}
struct MapCompassView_Previews: PreviewProvider {
    static var previews: some View {
        MapCompassView()
    }
}