Flutter多功能集成插件voltron介绍与使用方法详解

Flutter多功能集成插件voltron介绍与使用方法详解

💡 介绍

Voltron 是一个基于 Hippy 动态框架的 Flutter 版本，几乎包含了 Hippy 的所有功能。它具有高性能、跨平台支持以及易于学习的特点。

详见 https://hippyjs.org，基于 Hippy 3.0。

🔨 开始使用Flutter多功能集成插件voltron介

1. 在 pubspec.yaml 中添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  voltron: ^0.0.1

2. 导入包

在 Dart 文件中导入 Voltron 包：

import 'package:voltron/voltron.dart';

3. 示例代码

以下是一个简单的示例代码，展示了如何使用 Voltron 插件加载动态模块并渲染到 Flutter 应用中：

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

// 定义页面类
class VoltronPage extends StatefulWidget {
  VoltronPage();

  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _VoltronPageState();
  }
}

class _VoltronPageState extends State<VoltronPage> {
  late VoltronJSLoaderManager _loaderManager; // 管理器实例
  late VoltronJSLoader _jsLoader; // JS 加载器实例

  [@override](/user/override)
  void initState() {
    super.initState();
    _initVoltronData(); // 初始化 Voltron 数据
  }

  // 初始化 Voltron 数据
  void _initVoltronData() async {
    var initParams = EngineInitParams(); // 初始化参数
    initParams.debugMode = false; // 关闭调试模式
    initParams.enableLog = true; // 启用日志记录
    initParams.coreJSAssetsPath = 'assets/jsbundle/vendor.android.js'; // 核心 JS 资产路径
    initParams.codeCacheTag = "common"; // 缓存标签

    // 创建加载管理器
    _loaderManager = VoltronJSLoaderManager.createLoaderManager(
      initParams,
      (statusCode, msg) {
        LogUtils.i(
          'loadEngine',
          'code($statusCode), msg($msg)', // 打印加载状态
        );
      },
    );

    // 配置模块加载参数
    var loadParams = ModuleLoadParams();
    loadParams.componentName = "Demo"; // 模块名称
    loadParams.codeCacheTag = "Demo"; // 缓存标签
    loadParams.jsAssetsPath = 'assets/jsbundle/index.android.js'; // JS 文件路径
    loadParams.jsParams = VoltronMap(); // 参数映射
    loadParams.jsParams?.push("msgFromNative", "Hi js developer, I come from native code!"); // 向 JS 传递参数

    // 创建加载器
    _jsLoader = _loaderManager.createLoader(
      loadParams,
      moduleListener: (status, msg) {
        LogUtils.i(
          "flutterRender",
          "loadModule status($status), msg ($msg)", // 打印模块加载状态
        );
      },
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _jsLoader.destroy(); // 销毁加载器
    _loaderManager.destroy(); // 销毁管理器
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return !(_jsLoader.back(() { // 返回键处理
          Navigator.of(context).pop();
        }));
      },
      child: Scaffold(
        body: VoltronWidget( // 渲染 Voltron 动态模块
          loader: _jsLoader,
        ),
      ),
    );
  }
}