Flutter模块化代码生成插件modular_codegen的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter模块化代码生成插件modular_codegen的使用

modular_codegen

代码生成插件用于 flutter_modular。该插件支持自动化注入，并包含 @Injectable、@Param 和 @Data 注解。

安装

在项目的 pubspec.yaml 文件中添加 modular_codegen 和 build_runner 作为开发依赖：

dev_dependencies:
  modular_codegen: any
  build_runner: any

自动化注入

通过 @Injectable 注解你的类，并确保包含 part 指令。

part 'home_controller.g.dart'; // ← part directive with your_file_name.g.dart

@Injectable() // ← Injectable annotation
class HomeController {
    ...
}

在项目根目录执行 build_runner 命令：

flutter pub run build_runner build

生成器会在生成的文件中提供一个 $ClassName，可以在模块的 binds 中注入：

class HomeModule extends Module {
  @override
  List<Bind> get binds => [
        $HomeController, // ← 由于类名为 `HomeController`，生成的可注入对象为 `$HomeController`
      ];
}

自动化注入会根据类构造函数的参数生成绑定。

// home_controller.dart
part 'home_controller.g.dart'; // ← part directive with your_file_name.g.dart

@Injectable() // ← Injectable annotation
class HomeController {
    final ApiRepository repository;
    HomeController({
        this.repository, // ← 构造函数的参数将定义生成的绑定
    })

    ...
}

// 生成的 home_controller.g.dart
Bind(i) => HomeController(
    repository: i.get<ApiRepository>(), // ← 来自构造函数的 repository 参数
);

Injectable 配置

@Injectable 注解有两个可选布尔参数：singleton 和 lazy。默认情况下，它们被设置为 true。你可以通过传递这些参数轻松禁用单例行为和懒加载行为。

例如：

@Injectable(singleton: false) // ← 禁用单例行为
class ProductController {
    ...
}

路由参数和导航参数（Navigator）

如果你需要通过导航器向控制器传递数据，可以使用 @Param 或 @Data 注解来标注构造函数的参数。

Param 用于动态路由

例如，如果路由URL将包含一个 id 参数，则提供一个同名的 String 参数并使用 @Param 注解。

part 'product_controller.g.dart'; // ← part directive with your_file_name.g.dart

@Injectable() // ← Injectable annotation
class ProductController {
    final String id;

    ProductController({@Param this.id}); // ← 此注解允许你在路由URL中传递 `id` 参数，如 `/product/:id`

    ...
}

Data 用于导航参数

类似地，如果你需要向路由传递复杂对象，可以使用 @Data 注解。

part 'product_controller.g.dart'; // ← part directive with your_file_name.g.dart

@Injectable() // ← Injectable annotation
class ProductController {
    final ProductItem item;

    ProductController({@Data this.item}); // ← 添加 @Data 注解
    ...
}

然后，在调用 Modular.to.pushNamed 时传递 arguments 参数：

Modular.to.pushNamed('/product', arguments: ProductItem());

更多关于Flutter模块化代码生成插件modular_codegen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter模块化代码生成插件modular_codegen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter模块化代码生成插件modular_codegen的使用，下面是一个简单的示例，展示如何集成和使用该插件来生成模块化代码。

步骤 1: 添加依赖

首先，你需要在你的pubspec.yaml文件中添加modular和modular_codegen的依赖。

dependencies:
  flutter:
    sdk: flutter
  modular: ^4.0.0 # 请根据最新版本号进行调整

dev_dependencies:
  build_runner: ^2.0.0 # 代码生成工具
  modular_codegen: ^4.0.0 # 请根据最新版本号进行调整

步骤 2: 创建模块

接下来，你需要创建一个模块。例如，我们可以创建一个名为home_module的模块。

创建模块目录结构

lib/
├── app_module/
│   ├── app_module.dart
│   └── app_routing.dart
├── home_module/
│   ├── home_module.dart
│   └── home_routing.dart
├── main.dart

home_module/home_module.dart

import 'package:flutter_modular/flutter_modular.dart';

class HomeModule extends Module {
  @override
  final List<Bind> binds = [];

  @override
  final List<ModularRoute> routes = [
    ChildRoute('/', child: (context, args) => HomePage()),
  ];
}

home_module/home_routing.dart

这个文件通常用于生成路由信息，但modular_codegen插件会自动处理这部分内容，所以这里可以保持为空或者仅包含模块路由的导入。

// import 'package:your_app/home_module/home_module.dart';

步骤 3: 配置主模块

在app_module中配置你的主模块，并引入home_module。

app_module/app_module.dart

import 'package:flutter_modular/flutter_modular.dart';
import 'package:your_app/home_module/home_module.dart';

class AppModule extends Module {
  @override
  final List<Bind> binds = [];

  @override
  final List<ModularRoute> routes = [
    ModuleRoute('/home', module: HomeModule()),
  ];
}

app_module/app_routing.dart

同样，这个文件可以保持为空或者仅包含模块路由的导入。

// import 'package:your_app/app_module/app_module.dart';

步骤 4: 配置主应用

在main.dart中配置你的Flutter应用，并使用Modular进行路由管理。

import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'app_module/app_module.dart';

void main() {
  runApp(ModularApp(module: AppModule(), child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Modular Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: Modular.generateRoute,
    );
  }
}

步骤 5: 生成代码

在项目的根目录下运行以下命令来生成代码：

flutter pub run build_runner build

注意：modular_codegen插件通常会在构建过程中自动生成路由文件，因此你不需要手动编写路由文件的内容。

步骤 6: 使用生成的代码

现在，你可以在你的应用中通过Modular导航到不同的模块。例如，在HomePage中导航到另一个模块：

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Modular.to.navigate('/home/some_other_route'); // 假设在HomeModule中有定义该路由
          },
          child: Text('Go to Another Route'),
        ),
      ),
    );
  }
}

以上就是一个简单的示例，展示了如何使用modular_codegen插件来生成Flutter模块化代码。希望这个示例对你有所帮助！

回到顶部