鸿蒙Flutter实战：24-混合开发详解-4-初始化Flutter

鸿蒙 Flutter 实战：24-跳转 Flutter 页面

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

前言

在上一章中，我们介绍了如何初始化 Flutter 引擎。本文重点介绍如何添加并跳转至 Flutter 页面，实现从原生鸿蒙页面到 Flutter 页面的导航。

跳转 Flutter 页面

原生页面跳转到 Flutter 页面示意图

一、跳转原理

1.1 核心思路

本质上是从一个原生页面 A 跳转至另一个原生页面 B，不过区别在于，页面 B 是一个页面容器，内嵌了 Flutter 内容。

1.2 通信机制

当打开页面 B 之前，我们需要通知 Flutter 提前切换页面，这里使用了 Flutter 提供的通信机制——EventChannel。

1.3 架构设计

┌─────────────────────────────────────────────────────────────┐
│                    页面跳转流程                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  原生页面 A              Flutter 引擎           原生页面 B   │
│       │                      │                      │       │
│       │  ① 准备跳转          │                      │       │
│       │ ───────────────────► │                      │       │
│       │   EventChannel 通知  │                      │       │
│       │                      │                      │       │
│       │                      │  ② 切换页面          │       │
│       │                      │                      │       │
│       │  ③ router.pushUrl    │                      │       │
│       │ ──────────────────────────────────────────► │       │
│       │                      │                      │       │
│       │                      │  ④ FlutterView 渲染  │       │
│       │                      │ ◄─────────────────── │       │
│       │                      │                      │       │
│     关闭                     显示 Flutter 内容         显示   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

二、添加 FlutterPage

2.1 创建容器页面

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

2.2 操作步骤

在 DevEco Studio 中：

1. 右键点击 ohos/entry/src/main/ets/pages 目录
2. 选择 New -> Page
3. 选择 Empty Page
4. 修改 PageName 为 FlutterContainerPage
5. 点击 Finish

2.3 页面代码

修改页面内容如下：

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() })
    }
  }
}

2.4 核心 API 说明

API	说明	调用时机
FlutterEntry	Flutter 入口类	创建容器时
aboutToAppear	初始化 Flutter	组件加载时
getFlutterView	获取 Flutter 视图	初始化后
FlutterPage	渲染 Flutter 内容	build 方法中
aboutToDisappear	释放资源	组件卸载时
onPageShow/onPageHide	生命周期同步	页面显示/隐藏时

2.5 FlutterPage 组件

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

三、修改原生页面

3.1 添加跳转按钮

在原生页面添加一个按钮，点击按钮时跳转至 Flutter 页面：

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%')
  }
}

3.2 效果说明

元素	说明
Text	显示欢迎文字
Blank	添加间距
Button	跳转按钮，点击触发路由
router.pushUrl	鸿蒙路由跳转 API

四、路由配置

4.1 配置路由表

在 src/main/resources/base/profile/main_pages.json 中配置路由：

{
  "src": [
    "pages/Index",
    "pages/FlutterContainerPage"
  ]
}

注意：新增的页面必须在路由表中注册，否则无法跳转。

4.2 路由参数传递

如果需要向 Flutter 页面传递参数，可以使用以下方式：

router.pushUrl({
  url: 'pages/FlutterContainerPage',
  params: {
    'routeName': '/home',
    'arguments': {'id': 123}
  }
})

五、EventChannel 通信

5.1 Flutter 侧定义 EventChannel

class FlutterPageNotifier {
  static const EventChannel _eventChannel = EventChannel('xxx.com/flutter_route');

  static Stream<dynamic> get routeStream {
    return _eventChannel.receiveBroadcastStream();
  }
}

5.2 ArkTS 侧发送事件

import { EventChannel } from '@ohos/flutter_ohos';

// 在跳转前发送事件
const eventChannel = new EventChannel(binaryMessenger, 'xxx.com/flutter_route');
eventChannel.sink?.success('pages/FlutterContainerPage');

六、完整流程总结

6.1 步骤清单

步骤	操作	说明
1	创建 FlutterContainerPage	作为 Flutter 容器
2	初始化 FlutterEntry	加载 Flutter 引擎
3	使用 FlutterPage 组件	渲染 Flutter 内容
4	管理生命周期	同步生命周期事件
5	配置路由	在 main_pages.json 中注册
6	添加跳转按钮	在原生页面触发跳转

6.2 生命周期同步

原生页面生命周期          Flutter 生命周期
      │                      │
      │ aboutToAppear        │
      │ ───────────────────► │ 初始化
      │                      │
      │ onPageShow           │
      │ ───────────────────► │ 恢复
      │                      │
      │ onPageHide           │
      │ ───────────────────► │ 暂停
      │                      │
      │ aboutToDisappear     │
      │ ───────────────────► │ 释放
      │                      │