Flutter使用Ohos原生组件的方法Flutter中有些功能使用原生组件包装会更简单，本文以flutter_file

Flutter中有些功能使用原生组件包装会更简单，本文以flutter_filereader的实现过程为例说明Ohos中使用原生组件的实现方法。

Filereader插件的作用是显示本地文件，在安卓和iOS上都使用系统webview实现，所以在Ohos上也采用了同样的思路。鸿蒙化主要的增量修改点如下

自定义Component和PlatformView

实现关键点：

1、使用AppStorage交换Component和PlatformView之间的数据

2、使用@Watch装饰器监听数据变化

使用原生组件自定义Component

AppStorage.setOrCreate('url', '')

@Component
struct FileReaderComponent {
  @Prop params: Params
  filereaderView: FileReaderView = this.params.platformView as FileReaderView
  @StorageLink('url') @Watch('onOpenFile') url: string = ''

  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Web({ src: this.url, controller: this.controller, incognitoMode: true })
        .fileAccess(true)
    }
  }

  onOpenFile(propName: string): void {
    Log.d(TAG, "onOpenFileUrl:" + this.url)
    this.controller.loadUrl(this.url)
  }
}

@Builder
function FileReaderBuilder(params: Params) {
  FileReaderComponent({ params: params })
}

实现自定义PlatformView

@Observed
export class FileReaderView extends PlatformView implements MethodCallHandler {
  methodChannel: MethodChannel;

  constructor(context: common.Context, viewId: number, args: ESObject, message: BinaryMessenger) {
    super();
    // 注册消息通道
    this.methodChannel = new MethodChannel(message, `wv.io/FileReader_${viewId}`, StandardMethodCodec.INSTANCE);
    this.methodChannel.setMethodCallHandler(this);
  }
  
  onMethodCall(call: MethodCall, result: MethodResult): void {
    // 接受Dart侧发来的消息
    let method: string = call.method;
    Log.d(TAG, "method=" + method)
    switch (method) {
      case 'openFile':
        let path = call.args as string
        let link1: SubscribedAbstractProperty<string> = AppStorage.link('url');
        link1.set("file://" + path)
        result.success(true);
        break;
    }
  }
  
  getView(): WrappedBuilder<[Params]> {
    return new WrappedBuilder(FileReaderBuilder);
  }

  dispose(): void {
  }
}

实现自定义的PlatformViewFactory并注册

实现自定义的PlatformViewFactory

export class FileReaderFactory extends PlatformViewFactory {
  message: BinaryMessenger;

  constructor(message: BinaryMessenger, createArgsCodes: MessageCodec<Object>) {
    super(createArgsCodes);
    this.message = message;
  }

  public create(context: common.Context, viewId: number, args: Object): PlatformView {
    return new FileReaderView(context, viewId, args, this.message);
  }
}

代码基本都差不多，修改类名就可以

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到以下知识点。`

`欢迎大家关注公众号<程序猿百晓生>，可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

注册自定义PlatformViewFactory

在插件的onAttachedToEngine注册自定义PlatformViewFactory

onAttachedToEngine(binding: FlutterPluginBinding): void {
    Log.d("FileReaderView", "onAttachedToEngine")

    this.methodChannel = new MethodChannel(binding.getBinaryMessenger(), "wv.io/FileReader");
    this.methodChannel.setMethodCallHandler(this);

    binding.getPlatformViewRegistry()?.
    registerViewFactory('FileReader', new FileReaderFactory(binding.getBinaryMessenger(), StandardMessageCodec.INSTANCE));
  }

在dart侧中增加Ohos平台View创建

Widget _createOhosView() {
    return OhosView(
      viewType: "FileReader",
      onPlatformViewCreated: _onPlatformViewCreated,
      creationParamsCodec: StandardMessageCodec(),
    );
  }

上述函数一般在flutter控件类的build函数中调用

Flutter使用Ohos原生组件的方法