Flutter扩展平台视图插件extended_platform_view的使用

Flutter扩展平台视图插件extended_platform_view的使用

ExtendedPlatformView 插件简化了在 Flutter 中初始化和通信平台视图（PlatformView）的过程。它提供了以下功能：

• 使用单个 ExtendedPlatformView 小部件在 Android 和 iOS 上创建 PlatformView
• 支持 MethodChannel
• 在 Android 上切换 HybridComposition 和 VirtualDisplay

如何使用

创建一个 ExtendedPlatformView 小部件

Widget build(BuildContext context) {
  return ExtendedPlatformView(
    config: const ExtendedPlatformViewConfig(
      viewType: 'sample_platform_view',
      creationParams: "text",
    ),
  );
}

添加 PlatformView 类并在 Android 上注册 viewType

1. 添加一个继承自 ExtendedPlatformView 的 PlatformView 类。

class SamplePlatformView: ExtendedPlatformView() {
    override fun initialize(params: CreationParams): View {
        return TextView(context).apply {
            text = params.args as String
        }
    }
}

1. 在 FlutterActivity 中注册 PlatformView。

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine.extendedPlatformView.register("sample_platform_view") { SamplePlatformView() }
    }
}

添加 PlatformView 类并在 iOS 上注册 viewType

1. 添加一个继承自 ExtendedPlatformView 的 PlatformView 类。

import extended_platform_view

class SamplePlatformView: ExtendedPlatformView {
    override func initialize(params: CreationParams) -> UIView {
        let label = UILabel(frame: params.frame)
        label.text = (params.args as! String)

        return label
    }
}

1. 在 AppDelegate 中注册 PlatformView。

import extended_platform_view

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        // You have to register ExtendedPlatformView before calling `GeneratedPluginRegistrant.register(with: self)`
        ExtendedPlatformViewRegistrar.register(viewType: "sample_platform_view", builder: { SamplePlatformView() })
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

MethodChannel

如果传递了 methodChannelDelegate 参数，则会创建一个 MethodChannel。

在平台端，ExtendedPlatformView 有一个 methodChannel 属性，并且会在调用 initialize(params: CreationParams) 方法之前自动分配。

Widget build(BuildContext context) {
  return ExtendedPlatformView(
    config: const ExtendedPlatformViewConfig(
      viewType: 'sample_platform_view',
      creationParams: "text",
    ),
    methodChannelDelegate: MethodChannelDelegate(
      onCreate: (methodChannel) {
        // do something...
      },
    ),
  );
}

在 Android 上：

override fun initialize(params: CreationParams): View {
    val textView = TextView(context).apply {
        text = params.args as String
    }
    
    methodChannel.setMethodCallHandler { call, result ->
        // do something...
    }
    
    return textView
}

在 iOS 上：

override func initialize(params: CreationParams) -> UIView {
    let label = UILabel(frame: params.frame)
    label.text = (params.args as! String)
    
    methodChannel.setMethodCallHandler({ call, result in
        // do something...
    })
    
    return label
}

Android Composition Mode

Flutter 在 Android 上有两种 PlatformView 组合模式。

默认情况下，ExtendedPlatformView 将使用 HybridComposition。

如果需要使用 VirtualDisplay 模式，可以将 ExtendedPlatformViewConfig.androidCompositionMode 设置为 AndroidCompositionMode.virtualDisplay。

ExtendedPlatformViewConfig(
    viewType: 'sample_platform_view',
    androidCompositionMode: AndroidCompositionMode.virtualDisplay,
)

示例代码

以下是完整的示例代码：

import 'package:extended_platform_view/extended_platform_view.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: _buildSamplePlatformView(),
      ),
    );
  }

  Widget _buildSamplePlatformView() {
    return ExtendedPlatformView(
      config: const ExtendedPlatformViewConfig(
        viewType: 'sample_platform_view',
        androidCompositionMode: AndroidCompositionMode.hybridComposition,
        creationParams: "initial text",
      ),
      methodChannelDelegate: MethodChannelDelegate(
        onCreate: (channel) async {
          await Future.delayed(const Duration(seconds: 3));
          channel.invokeMethod(
            'set_text',
            '3 seconds elapsed',
          );
        },
      ),
    );
  }
}