MXFlutter 使用教程

MXFlutter 使用教程

mxflutter 使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。 项目地址: https://gitcode.com/gh_mirrors/mxf/mxflutter

1、项目介绍

MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。它支持两种开发方式：

• 基于 mxflutter-js 前端框架，使用 TypeScript 语言，以类似 Flutter 的 Widget 组装方式开发 UI，借助前端生态的基础能力开发 App。
• 不改变现有 Flutter 的开发方式，使用 MXJSCompiler 把现有工程编译为 JS，运行在 mxflutter 框架之上。

MXFlutter 的目标是让开发者能够使用熟悉的 TypeScript/JavaScript 语言来开发 Flutter 应用，同时保持与 Flutter 原生开发方式的高度一致性。

2、项目快速启动

环境准备

• Flutter SDK
• Node.js
• mxflutter CLI 工具

安装 mxflutter CLI 工具

npm install -g mxflutter-cli

创建新项目

mxflutter create my_mxflutter_app
cd my_mxflutter_app

编写代码

在 src/index.ts 文件中编写你的 TypeScript 代码，例如：

import { MXFlutterApp, MXWidget, MXText } from 'mxflutter';

class MyApp extends MXWidget {
  build() {
    return new MXText('Hello, MXFlutter!', {
      style: {
        fontSize: 24,
        color: '#000000',
      },
    });
  }
}

const app = new MXFlutterApp({
  home: new MyApp(),
});

app.run();

编译项目

mxflutter build

在 Flutter 项目中引入 mxflutter

在你的 Flutter 项目中添加 mxflutter 依赖：

dependencies:
  mxflutter: ^0.9.0

然后在 main.dart 中引入并运行你的 MXFlutter 应用：

import 'package:mxflutter/mxflutter.dart';

void main() {
  runApp(MXFlutterApp(
    bundlePath: 'assets/bundle-xxx.js',
  ));
}

运行项目

flutter run

3、应用案例和最佳实践

应用案例

• 社交应用：使用 MXFlutter 开发社交应用的前端界面，利用 TypeScript 的强类型特性提高代码质量。
• 电商应用：通过 MXFlutter 实现复杂的 UI 布局和交互，同时利用前端生态的丰富组件库加速开发。

最佳实践

• 模块化开发：将应用拆分为多个模块，每个模块独立开发和测试，提高代码的可维护性。
• 性能优化：使用 MXJSCompiler 编译现有 Flutter 工程为 JS，确保性能与原生 Flutter 应用相当。

4、典型生态项目

• mxflutter-js: TS 前端框架，支撑使用 Flutter Widget 组装方式开发 UI。
• mxflutter_pkg: mxflutter 第三方 Package 支持的示例。
• awesome_mxflutter: Flutter 示例工程，演示如何运行 JS Bundle。
• mxflutter-js-demo: JS 示例工程，演示如何使用 TS 开发 Flutter。
• mx_mirror_builder: 辅助工具，用于生成 TS 类定义和 Mirror 映射。

通过这些生态项目，开发者可以更高效地使用 MXFlutter 进行开发，并快速集成到现有 Flutter 项目中。

mxflutter 使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。 项目地址: https://gitcode.com/gh_mirrors/mxf/mxflutter