HarmonyOS鸿蒙Next原生应用如何将flutter的页面嵌入到TabContent中

【背景知识】

FlutterBoost插件为现有HarmonyOS应用程序提供Flutter混合集成方案：

• FlutterBoost可将Flutter作为Webview那样来使用，同时管理Native页面和Flutter页面；
• FlutterBoost可处理页面映射和跳转，开发者只需关心页面的名字和参数即可。

【解决方案】

构造FlutterUIComponent组件，在TabContent中加FlutterUIComponent组件实现将Flutter页面作为HarmonyOS工程的tab页，具体参考代码如下：

build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        TabContent() {
          Row() {
            Column() {
              Button('打开Flutter页面')
                .margin({ bottom: 10 })
                .onClick(() => {
                  try {
                    FlutterBoost.getInstance().open('flutterPage', {})
                  } catch (err) {
                    hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Flutter页面');
                  }
                })
              Button('打开Native页面')
                .margin({ bottom: 10 })
                .onClick(() => {
                  try {
                    router.pushUrl({ url: 'pages/NativePage' })
                  } catch (err) {
                    hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Native页面');
                  }
                })
            }
            .width('100%')
          }
          .height('100%')
        }.tabBar(this.tabBuilder(0, '首页'))

        TabContent() {
          FlutterUIComponent({ uri: 'flutterPage' })
        }.tabBar(this.tabBuilder(0, 'flutterPage'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')
      .height('100%')
    }.width('100%')
  }

1. 构造uri和params参数，其中uri为Flutter页面对应的名字，params为入参，当点击对应的tab时，可跳转到uri对应的Flutter页面（同时保留tabbar），具体参考代码如下：

@Component
export struct FlutterUIComponent {
  @Prop uri: string;
  @Prop params: Record<string, Object>;

  private flutterEntry: FlutterBoostEntry | null = null;
  private flutterView?: FlutterView;
  private effect: object =
    TransitionEffect.OPACITY
      .combine(TransitionEffect.move(TransitionEdge.END)).animation({curve: curves.springMotion()});

  aboutToAppear() {
    this.flutterEntry = new FlutterBoostEntry(getContext(this), {
      uri: this.uri,
      params: this.params,
    });
    this.flutterEntry.aboutToAppear();
    this.flutterView = this.flutterEntry.getFlutterView();
    hilog.info(0x0000, TAG, 'Component(#%{public}s) aboutToAppear===', this.uri);
  }

  aboutToDisappear() {
    hilog.info(0x0000, TAG, 'Component(#%{public}s) aboutToDisappear===', this.uri);
    this.flutterEntry?.aboutToDisappear()
  }

  onPageShow() {
    hilog.info(0x0000, TAG, 'Component(#%{public}s) onPageShow===', this.uri);
    this.flutterEntry?.onPageShow()
  }
  // 1
  onPageHide() {
    hilog.info(0x0000, TAG, 'Component(#%{public}s) onPageHide===', this.uri);
    this.flutterEntry?.onPageHide()
  }

  build() {
    Stack() {
      FlutterPage({ viewId: this.flutterView?.getId() })
    }
    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
      if (isVisible) {
        setTimeout(() => {
          this.onPageShow();
        }, 0);
      } else {
        this.onPageHide();
      }
    })
    .transition(this.effect)
  }
}