Flutter集成插件fusion的使用

简介

Fusion 是新一代的混合栈管理框架，用于 Flutter 与 Native 页面统一管理，并支持页面通信、页面生命周期监听等功能。它解决了混合开发过程中普遍存在的黑屏、白屏、闪屏等问题，适合重视用户体验的App使用。

从 4.0 开始，Fusion 已完成纯鸿蒙平台（HarmonyOS Next/OpenHarmony）的适配，开发者可以在Android、iOS、HarmonyOS上得到完全一致的体验。

开始使用

0、准备

在开始前需要按照 Flutter 官方文档，将 Flutter Module 项目接入到 Android、iOS、HarmonyOS 工程中。

1、初始化

Flutter 侧

使用 FusionApp 替换之前使用的 App Widget，并传入所需路由表。

void main() {
  Fusion.instance.install();
  runApp(FusionApp(
    routeMap: routeMap,
    customRouteMap: customRouteMap,
  ));
}

final Map<String, FusionPageFactory> routeMap = {
  '/test': (arguments) => TestPage(arguments: arguments),
  kUnknownRoute: (arguments) => UnknownPage(arguments: arguments),
};

final Map<String, FusionPageCustomFactory> customRouteMap = {
  '/mine': (settings) => PageRouteBuilder(
      opaque: false,
      settings: settings,
      pageBuilder: (_, __, ___) => MinePage(
          arguments: settings.arguments as Map<String, dynamic>?)),
};

Android 侧

在 Application 中进行初始化，并实现 FusionRouteDelegate 接口。

class MyApplication : Application(), FusionRouteDelegate {

    override fun onCreate() {
        super.onCreate()
        Fusion.install(this, this)
    }

    override fun pushNativeRoute(name: String?, arguments: Map<String, Any>?) {
        // 根据路由 name 跳转对应 Native 页面
    }

    override fun pushFlutterRoute(name: String?, arguments: Map<String, Any>?) {
        // 根据路由 name 跳转对应 Flutter 页面
    }
}

iOS 侧

在 AppDelegate 中进行初始化，并实现 FusionRouteDelegate 代理。

@UIApplicationMain
@objc class AppDelegate: UIResponder, UIApplicationDelegate, FusionRouteDelegate {
    
    func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
      ...
      Fusion.instance.install(self)
      ...
    return true
  }
    
    func pushNativeRoute(name: String?, arguments: Dictionary<String, Any>?) {
        // 根据路由 name 跳转对应 Native 页面
    }
    
    func pushFlutterRoute(name: String?, arguments: Dictionary<String, Any>?) {
        // 根据路由 name 跳转对应 Flutter 页面
    }
}

HarmonyOS 侧

在 UIAbility 中进行初始化，并实现 FusionRouteDelegate 代理。

export default class EntryAbility extends UIAbility implements FusionRouteDelegate {
  private static TAG = 'EntryAbility'
  private mainWindow: window.Window | null = null
  private windowStage: window.WindowStage | null = null

  override async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): Promise<void> {
    await Fusion.instance.install(this.context, this)
    GeneratedPluginRegistrant.registerWith(Fusion.instance.defaultEngine!)
  }

  pushNativeRoute(name: string, args: Map<string, Object> | null): void {
    // 根据路由 name 跳转对应 Native 页面
  }

  pushFlutterRoute(name: string, args: Map<string, Object> | null): void {
    // 根据路由 name 跳转对应 Flutter 页面
  }
}

2、Flutter 容器

普通页面模式

Android 侧

通过 FusionActivity 创建 Flutter 容器，启动容器时需要使用 Fusion 提供的 buildFusionIntent 方法。

<activity
    android:name=".CustomFusionActivity"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:exported="false"
    android:hardwareAccelerated="true"
    android:launchMode="standard"
    android:theme="@style/FusionNormalTheme"
    android:windowSoftInputMode="adjustResize" />

iOS 侧

通过 FusionViewController 创建 Flutter 容器。

// 启用原生手势
func enablePopGesture() {
    navigationController?.interactivePopGestureRecognizer?.isEnabled = true
}

// 关闭原生手势
func disablePopGesture() {
    navigationController?.interactivePopGestureRecognizer?.isEnabled = false
}

HarmonyOS 侧

通过 FusionEntry 创建 Flutter 容器。

const params = buildFusionParams(name, args, false, backgroundColor)
this.mainLocalStorage?.setOrCreate('params', params)
router.pushNamedRoute({name: FusionConstant.FUSION_ROUTE_NAME})

示例 Demo

以下是一个完整的示例，展示了如何在 Flutter 项目中集成 Fusion 插件。

import 'package:flutter/material.dart';
import 'package:fusion/fusion.dart';

void main() {
  Fusion.instance.install();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FusionApp(
      routeMap: routeMap,
      customRouteMap: customRouteMap,
    );
  }
}

final Map<String, FusionPageFactory> routeMap = {
  '/index': (args) => IndexPage(args: args),
  kUnknownRoute: (args) => UnknownPage(args: args),
};

final Map<String, FusionPageCustomFactory> customRouteMap = {
  '/dialog_page': (settings) => PageRouteBuilder(
      opaque: settings.opaque,
      settings: settings,
      pageBuilder: (_, __, ___) => DialogPage(args: settings.arguments as Map<String, dynamic>?)),
};

以上代码展示了如何在 Flutter 应用中使用 Fusion 插件来管理路由和页面导航。通过这种方式，开发者可以轻松地在 Flutter 和 Native 页面之间进行切换，并且享受到更好的性能和更低的内存占用。

更多详细信息和功能请参考 Fusion 的官方文档和示例代码。