概述

在上一章中，我們介紹了如何初始化 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, 隨后修改頁面內容如下：

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 來自定義渲染內容。

修改原生頁面

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 頁面。

參考資料

• 如何使用混合開發添加跳轉 FlutterEntry
• flutter_page_sample2
• flutter_page_sample1