鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面

概述

在上一章中,我们介绍了如何初始化 Flutter 引擎,本文重点介绍如何添加并跳转至 Flutter 页面。

跳转原理

跳转原理如下:

本质上是从一个原生页面A 跳转至另一个原生页面 B,不过区别在于,页面 B是一个页面容器,内嵌了 Flutter 内容。 同时当打开页面 B 之前,我们需要通知 Flutter 提前切换页面,这里使用了 Flutter 提供的通信机制,也就是 EventChannel。

添加 FlutterPage

为了显示 Flutter 内容,我们需要创建一个原生页面,作为承载 Flutter 的容器。

entry/src/main/etc/pages 目录下添加一个页面, 例如名称为 FlutterContainerPage, 鼠标右键点击 ohos/entry/src/main/ets/pages 目录,依次选择 New->Page->Empty Page 修改 PageName 为 FlutterContainerPage, 点击 Finish, 随后修改页面内容如下:

ts 复制代码
import { FlutterEntry, FlutterPage, FlutterView } from '@ohos/flutter_ohos'

@Entry
@Component
struct Index {

  private flutterEntry?: FlutterEntry;
  private flutterView?: FlutterView;

  aboutToAppear() {
    this.flutterEntry = new FlutterEntry(getContext(this));
    this.flutterEntry.aboutToAppear();
    this.flutterView = this.flutterEntry.getFlutterView();
  }

  aboutToDisappear() {
    this.flutterEntry?.aboutToDisappear();
  }

  onPageShow() {
    this.flutterEntry?.onPageShow();
  }

  onPageHide() {
    this.flutterEntry?.onPageHide();
  }

  build() {
    RelativeContainer() {
      FlutterPage({ viewId: this.flutterView?.getId()})
    }
  }
}

FlutterPage 是 OpenHarmony Flutter SDK 提供的一个组件,用于在 ArkUI中渲染 Flutter 页面。其原理是使用了 ArkUI 中的 XComponent 来自定义渲染内容。

修改原生页面

ts 复制代码
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Hello World').fontSize('50fp').fontWeight(FontWeight.Bold)
      Blank().height(80)
      Button('跳转Flutter').onClick(() => {
        router.pushUrl({ url: 'pages/FlutterContainerPage'})
      })
    }.justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('100%')
  }
}

我们在原生页面处添加一个按钮,点击按钮时跳转至 Flutter 页面。

接下来

在上面的例子中,每次打开的 Flutter 页面是固定的,接下来我们将探讨如何实现动态跳转 Flutter 页面。

参考资料

相关推荐
2501_9160088917 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu17 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una17 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao17 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇17 小时前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪17 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子18 小时前
nextTick的使用
前端·javascript·vue.js
萌新小码农‍18 小时前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
冰暮流星18 小时前
css3新增背景图片样式
前端·css·css3
消失的旧时光-194319 小时前
iFlutter --> Flutter 开发者 的 IntelliJ IDEA / Android Studio 插件
flutter·android studio·intellij-idea