PlatformView 同层渲染方案适配切换指导

作者：flfljh

2024-11-07
湖南
本文字数：1877 字
阅读完需：约 6 分钟

PlatformView 同层渲染方案适配切换指导

PlatformView 旧方案

简述

在 Flutter 适配层定义 DynamicView 和 DVModel

@Observedexport class DVModel {  id_: number;  compType: string;  params: DVModelParameters;  events: DVModelEvents;  children: DVModelChildren;  builder: Any;
  public getLayoutParams(): DVModelParameters {return this.params;  }}

@Componentexport struct DynamicView{  @ObjectLink model:DVModel;  @ObjectLink children:DVModelChildren;  @ObjectLink params:DVModelParameters;  @ObjectLink events:DVModelEvents;  @BuilderParam customBuilder?:($$:BuilderParams)=>void;}

复制代码

开发者使用 json 字符串来定义生成 DVModel 模型，实现 PlatformView 的定义，将 FlutterView 置于底层，DynamicView 实现的 PlatformView 置于顶层，DynamicView 使用 ArkUI 实现，所以是通过鸿蒙的原生渲染的。

  build() {Stack() {  XComponent({ id: this.viewId, type: this.xComponentType, libraryname: 'flutter' }).focusable(true).focusOnTouch(true).onLoad((context) => {  this.flutterView?.onSurfaceCreated()  Log.d(TAG, "XComponent onLoad ");}).onDestroy(() => {  Log.d(TAG, "XComponent onDestroy ");  this.flutterView?.onSurfaceDestroyed()}).backgroundColor(Color.Transparent)
  ForEach(this.rootDvModel!!, (child: Any) => {DynamicView({  model: child as DVModel,  params: child.params,  events: child.events,  children: child.children,  customBuilder: child.builder})  })  }

复制代码

Flutter 页面嵌入 PlatformView 时会有下面两个严重缺陷：

1. PlatformView 覆盖在 FlutterView 上面出现遮挡问题

2. 页面切换时，FlutterView 和 PlatformView 动画不一致

PlatformView 新方案

简述

采用 NodeContainer 同层渲染功能，将原生平台组件的纹理导出注册到 Flutter Engine，由 Flutter 统一渲染。可以解决旧方案的固有缺陷，并且 PlatformView 使用自定义 ArkUI 的 Component 组件，符合鸿蒙原生应用开发习惯，不用按照 DVModel 来定义，同时避免写 json 没有代码提示的困扰。

  build() {Stack() {  NodeContainer(this.nodeController) .width(this.storageLinkWidth) .height(this.storageLinkHeight)
  XComponent({ id: this.viewId, type: this.xComponentType, libraryname: 'flutter' }).focusable(true).focusOnTouch(true).onLoad((context) => {  this.flutterView?.onSurfaceCreated()  Log.d(TAG, "XComponent onLoad ");}).onDestroy(() => {  Log.d(TAG, "XComponent onDestroy ");  this.flutterView?.onSurfaceDestroyed()}).backgroundColor(Color.Transparent)}  }

复制代码

新旧方案实现关键区别：

旧方案：

private model: DVModel = createDVModelFromJson(  {compType: "Column",attributes: { height: '200%'},children: [  {compType: "Text",attributes: { value: "Native:发送数据给Dart111111111111111", fontColor: Color.Orange,backgroundColor: Color.Black,height: 100},events: { onClick: this.sendMessage },  },  {compType: "Text",attributes: { value: "Native:来自Dart的数据", marginTop: 20 },  }],  });

/// 自定义PlatformView实体类的实现的接口getView(): DVModel {  return this.model;}

复制代码

新方案：

@Componentstruct ButtonComponent {@Prop params: Params customView: CustomView = this.params.platformView as CustomView@StorageLink('numValue') storageLink: string = "first"@State bkColor: Color = Color.Red
build() {  Column() {Button("发送数据给Flutter")  .border({ width: 2, color: Color.Blue})  .backgroundColor(this.bkColor)  .onTouch((event: TouchEvent) => {console.log("nodeController button on touched")  }).onClick((event: ClickEvent) => {this.customView.sendMessage();console.log("nodeController button on click")})
Text(`来自Flutter的数据 : ${this.storageLink}`)  .onTouch((event: TouchEvent) => {  console.log("nodeController text on touched")})
  }.alignItems(HorizontalAlign.Center)  .justifyContent(FlexAlign.Center)  .direction(Direction.Ltr)  .width('100%')  .height('100%')}}

/// 自定义PlatformView实体类的实现的接口getView(): WrappedBuilder<[Params]> {  return new WrappedBuilder(ButtonBuilder);}

复制代码

发布于: 刚刚阅读数: 5

flfljh

关注

还未添加个人签名 2024-10-29 加入

还未添加个人简介

发布

暂无评论

创作场景

PlatformView 同层渲染方案适配切换指导

PlatformView 同层渲染方案适配切换指导

PlatformView 旧方案

简述

PlatformView 新方案

简述

新旧方案实现关键区别：

flfljh

评论