Flutter中PlatformView在鸿蒙中的使用

概述

集成平台视图（后称为平台视图）允许将原生视图嵌入到 Flutter 应用中，所以你可以通过 Dart 将变换、裁剪和不透明度等结果应用到原生视图。
例如，这使你可以通过使用平台视图直接在 Flutter 应用内部使用鸿蒙中的原生舆图。
在Flutter中的处置惩罚

首先我们需要再Flutter中创建一个视图，用来加载Ohos平台的view。

1. import 'dart:async';
3. import 'package:flutter/material.dart';
4. import 'package:flutter/services.dart';
6. typedef OnViewCreated = Function(CustomViewController);
8. class CustomOhosView extends StatefulWidget {
9.   final OnViewCreated onViewCreated;
10.   const CustomOhosView(this.onViewCreated, {super.key});
12.   @override
13.   State<CustomOhosView> createState() => _CustomOhosViewState();
14. }
16. class _CustomOhosViewState extends State<CustomOhosView> {
17.   late MethodChannel _channel;
19.   @override
20.   Widget build(BuildContext context) {
21.     return _getPlatformFaceView();
22.   }
24.   Widget _getPlatformFaceView() {
25.     // 加载platformview
26.     /**
27.      * viewType：传递给Native侧，告知插件需要创建那个PlatformView，这个PlatformView需要在插件初始化时注册。
28.         onPlatformViewCreated：PlatformView创建成功时的回调。
29.         creationParams：传递给PlatformView的初始化参数。
30.      */
31.     return OhosView(
32.       viewType: 'com.rex.custom.ohos/customView',
33.       onPlatformViewCreated: _onPlatformViewCreated,
34.       creationParams: const <String, dynamic>{'initParams': 'hello world'},
35.       creationParamsCodec: const StandardMessageCodec(),
36.     );
37.   }
39.   void _onPlatformViewCreated(int id) {
40.     print("platformview==================创建成功");
41.     _channel = MethodChannel('com.rex.custom.ohos/customView$id');
42.     final controller = CustomViewController._(
43.       _channel,
44.     );
45.     widget.onViewCreated(controller);
46.   }
47. }
49. // 用于实现Dart侧与Native侧的交互
50. class CustomViewController {
51.   final MethodChannel _channel;
52.   final StreamController<String> _controller = StreamController<String>();
54.   CustomViewController._(
55.       this._channel,
56.       ) {
57.     _channel.setMethodCallHandler(
58.           (call) async {
59.         switch (call.method) {
60.           case 'getMessageFromOhosView':
61.           // 从native端获取数据
62.             final result = call.arguments as String;
63.             _controller.sink.add(result);
64.             break;
65.         }
66.       },
67.     );
68.   }
70.   Stream<String> get customDataStream => _controller.stream;
72.   // 发送数据给native
73.   Future<void> sendMessageToOhosView(String message) async {
74.     await _channel.invokeMethod(
75.       'getMessageFromFlutterView',
76.       message,
77.     );
78.   }
79. }

复制代码

鸿蒙端

创建内嵌的鸿蒙视图

该视图就是我们ohos平台中的组件， 示例代码如下：

1. @Component
2. export struct PlatformView_Custom {
3.   @Prop params: Params
5.   // customView: video_Customview = this.params.platformView as video_Customview
7.   build() {
8.     Column() {
9.       Column() {
10.         Button("测试按钮")
11.           .onClick(() => {
12.             console.log("点击按钮时间")
13.           })
15.       }
16.       .backgroundColor(Color.Orange)
17.       .height('230vp')
18.       .width('100%')
19.       .justifyContent(FlexAlign.End)
20.     }
21.     .backgroundColor(Color.Pink)
22.       .width('100%')
23.       .height('100%')
25.   }
26. }

复制代码

注意：PlatformView_Custom 嵌入到Flutter页面中时， 体系实际上是在我们的这个组件又包裹了一层空间， 并且默认是布满Flutter父空间的全部空间。
创建PlatformView

我们需要创建一个PlatformView的子类，并实现并且实现MethodCallHandler接口。
该类有两个作用：

• 通过类中的getView(): WrappedBuilder<[Params]>{}方法把上面创建的鸿蒙组件加载到这个PlatformView上
  
• 实现MethodCallHandler接口， 负责和Flutter的相干通信
  

示例代码如下：

1. /**
2. * @ProjectName : ohos
3. * @FileName : PlatformView_plugin
4. * @Author : issuser
5. * @Time : 2024/10/11 9:33
6. * @Description : 文件描述
7. */
8. import {
9.   BinaryMessenger,
10.   MethodCall, MethodCallHandler, MethodChannel, MethodResult, PlatformView,
11.   StandardMethodCodec } from '@ohos/flutter_ohos';
12. import { Params } from '@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView';
13. import { PlatformView_Custom } from './PlatformView_Custom';
14. import { common } from '@kit.AbilityKit';
16. export class PlatformView_plugin extends PlatformView implements MethodCallHandler {
17.   numValue: string = "test";
19.   methodChannel: MethodChannel;
20.   index: number = 1;
22. // 构造方法
23.   constructor(context: common.Context, viewId: number, args: ESObject, message: BinaryMessenger) {
24.     super();
26.     // 注册消息通道，消息通道根据具体需求添加，代码仅作为示例
27.     this.methodChannel = new MethodChannel(message, `com.rex.custom.ohos/video_CustomView${viewId}`, StandardMethodCodec.INSTANCE);
28.     // 给通道添加监听
29.     this.methodChannel.setMethodCallHandler(this);
30.   }
32. // 实现onMethodCall接口
33.   onMethodCall(call: MethodCall, result: MethodResult): void {
34.     // 接受Dart侧发来的消息
35.     let method: string = call.method;
36.     let link1: SubscribedAbstractProperty<number> = AppStorage.link('numValue');
37.     switch (method) {
38.       case 'video_getMessageFromFlutterView':
39.         let value: ESObject = call.args;
40.         this.numValue = value;
41.         link1.set(value)
42.         console.log("nodeController receive message from dart: " + this.numValue);
43.         result.success(true);
44.         break;
45.     }
46.   }
48.   //  返回鸿蒙要展示的视图
49.   getView(): WrappedBuilder<[Params]> {
50.     return new WrappedBuilder(platformBuilder)
51.   }
53. // 生命周期方法 销毁时
54.   dispose(): void {
55.     throw new Error('Method not implemented.');
56.   }
58. }
60. // 全局的build函数，通过这个bbuilder函数返回我们的组件view
61. @Builder
62. function platformBuilder(param: Params) {
63.   PlatformView_Custom({params: param})
64.     .backgroundColor(Color.Green)
65. }

复制代码

创建PlatformViewFactory

PlatformView类的创建是通过PlatformViewFactory来创建， 所以我们需要创建一个工厂类继承自PlatformViewFactory。
示例代码：

1. // 通过工厂方法创建一个plaugin示例
2. export class CustomFactory extends PlatformViewFactory {
3.   message: BinaryMessenger;
4.   constructor(message: BinaryMessenger, createArgsCodes: MessageCodec<Object>) {
5.     super(createArgsCodes);
6.     this.message = message;
7.   }
9.   public create(context: Context, viewId: number, args: Object): PlatformView {
10.     return new PlatformView_plugin(context, viewId, args, this.message);
11.   }
12. }

复制代码

创建plugin，注册platformview

新建一个继承于FlutterPlugin的CustomPlugin插件，在onAttachedToEngine中，注册自定义的PlatformViewFactory
示例代码：

1. import { StandardMessageCodec } from '@ohos/flutter_ohos';
2. import {
3.   FlutterPlugin,
4.   FlutterPluginBinding
5. } from '@ohos/flutter_ohos/src/main/ets/embedding/engine/plugins/FlutterPlugin';
6. import { CustomFactory } from './CustomFactory';
8. export class CustomPlugin implements FlutterPlugin {
9.   getUniqueClassName(): string {
10.     return 'CustomPlugin'
11.   }
12.        
13. // 当插件挂载到引擎上时
14.   onAttachedToEngine(binding: FlutterPluginBinding): void {
15.     // 在插件挂在在引擎的时候， 我们需要注册我们的view
16.     binding.getPlatformViewRegistry()?.
17.     registerViewFactory('com.rex.custom.ohos/customView',
18.       new CustomFactory(binding.getBinaryMessenger(), StandardMessageCodec.INSTANCE));
19.   }
21.   onDetachedFromEngine(binding: FlutterPluginBinding): void {
22.     throw new Error('Method not implemented.');
23.   }
24. }

复制代码

注册插件

在EntryAblitity中注册我们创建的自定义插件：

1. export default class EntryAbility extends FlutterAbility {
2.   configureFlutterEngine(flutterEngine: FlutterEngine) {
3.     super.configureFlutterEngine(flutterEngine)
4.     GeneratedPluginRegistrant.registerWith(flutterEngine)
5.     // 注册platformview的自定义插件
6.     this.addPlugin(new CustomPlugin());
7.   }
8. }

复制代码

然后执行flutter build hap命令进行编译， 配置相干证书， 运行。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。