如何将 FlutterViewController 添加到 UIViewController

Question

我能找到的关于 Flutter 的 Add-to-App 的所有文档都演示了如何推送/继续/呈现新创建的 FlutterViewController。我需要将颤动视图添加到选项卡栏中的选项卡。我尝试将班级的超类从

UIViewController

更改为

FlutterViewController

，这有效，但没有使用在应用程序委托中创建的颤振引擎。此解决方案导致在启动屏幕中显示颤动视图之前，这是不希望的。

如何向

UIViewController

添加颤动视图？或者如何从类中将引擎分配给

FlutterViewController

？

Answer 1

我找到了一个将颤动视图添加到视图控制器的解决方案。

// create an extension for all UIViewControllers
extension UIViewController {
     /**
         Add a flutter sub view to the UIViewController
         sets constraints to edge to edge, covering all components on the screen
     */
    func addFlutterView(with engine: FlutterEngine) {
        // create the flutter view controller
        let flutterViewController = FlutterViewController(engine: engine, nibName: nil, bundle: nil)
        
        addChild(flutterViewController)
        
        guard let flutterView = flutterViewController.view else { return }

        // allows constraint manipulation
        flutterView.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(flutterView)
        
        // set the constraints (edge-to-edge) to the flutter view
        let constraints = [
            flutterView.topAnchor.constraint(equalTo: view.topAnchor),
            flutterView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            flutterView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            flutterView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ]

        // apply (activate) the constraints
        NSLayoutConstraint.activate(constraints)

        flutterViewController.didMove(toParent: self)
        
        // updates the view with configured layout
        flutterView.layoutIfNeeded()
    }
}

对于任何 UIViewController，您现在都可以添加 flutter 子视图。

override func viewDidLoad() {
    super.viewDidLoad()
    
    // get the flutter engine for the view
    let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
    
    // add flutter view
    addFlutterView(with: flutterEngine)

    // Do any additional setup after loading the view.
}

Answer 2

// create an extension for all UIViewControllers
extension UIViewController {
     /**
         Add a flutter sub view to the UIViewController
         sets constraints to edge to edge, covering all components on the screen
     */
    func addFlutterView(with engine: FlutterEngine) {
        // create the flutter view controller
        let flutterViewController = FlutterViewController(engine: engine, nibName: nil, bundle: nil)
        
        addChild(flutterViewController)
        
        guard let flutterView = flutterViewController.view else { return }

        // allows constraint manipulation
        flutterView.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(flutterView)
        
        // set the constraints (edge-to-edge) to the flutter view
        let constraints = [
            flutterView.topAnchor.constraint(equalTo: view.topAnchor),
            flutterView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            flutterView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            flutterView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ]

        // apply (activate) the constraints
        NSLayoutConstraint.activate(constraints)

        flutterViewController.didMove(toParent: self)
        
        // updates the view with configured layout
        flutterView.layoutIfNeeded()
    }
}

对于任何 UIViewController，您现在都可以添加 flutter 子视图。

@IBAction func  loadFlutterView(){
   flutterEngine.run(withEntrypoint: nil, libraryURI: nil, initialRoute: nil, entrypointArgs: [ "CONSENT_HANDLE=\(conentHandle)","PACKAGE_NAME=com.pirimid.fiu"]);
            GeneratedPluginRegistrant.register(with: self.flutterEngine);
            addFlutterView(with: flutterEngine)
}

Answer 3

当前的答案是准确的，但需要指出的是，如果您遇到与我相同的问题，即仅当您按 Home 然后返回时才会出现 Flutter 视图，您需要确保添加正确的 Flutter.xcframework 文件。

我错误地从以下路径添加了 Flutter.xcframework 文件：

<path_to_flutter_sdk>/bin/cache/artifacts/engine/ios/Flutter.xcframework

而不是

<path_to_flutter_sdk>/bin/cache/artifacts/engine/ios/extension_safe/Flutter.xcframework

关键是您需要确保从

extension_safe

目录中获取 Flutter.xcframework 文件。

更新后一切正常。

注意：我遵循了本教程https://docs.flutter.dev/platform-integration/ios/app-extensions