Flutter模块化布局插件modular_shelf的使用

Flutter模块化布局插件modular_shelf的使用

关于

modular_shelf 是一个用于 shelf 的依赖注入系统，主要基于 flutter_modular 和 nestjs 的依赖声明语法。

使用

定义我们的用例/提供者/依赖

class SumUsecase {
  const SumUsecase();

  // 计算两个整数之和
  int sum(int a, int b) => a + b;
}

class SubtractionUsecase {
  const SubtractionUsecase();

  // 计算两个整数之差
  int subtraction(int a, int b) => a - b;
}

class MathUsecase {
  final SumUsecase sumUsecase;
  final SubtractionUsecase subtractionUsecase;

  const MathUsecase(this.sumUsecase, this.subtractionUsecase);

  // 调用SumUsecase的sum方法
  int sum(int a, int b) => sumUsecase.sum(a, b);

  // 调用SubtractionUsecase的subtraction方法
  int subtraction(int a, int b) => subtractionUsecase.subtraction(a, b);
}

定义我们的控制器

class TestController extends ShelfController {
  final MathUsecase mathUsecase;

  // 构造函数，初始化服务器路由和路径
  TestController(Router serverRouter, {required this.mathUsecase})
      : super(serverRouter, '/test/');

  // 获取路由器
  @override
  Router get router => Router();

  // 测试求和方法
  int testSum(int a, int b) => mathUsecase.sum(a, b);

  // 测试减法方法
  int testSubtraction(int a, int b) => mathUsecase.subtraction(a, b);
}

定义我们的模块

class TestModule extends ShelfModule {
  TestModule(Router serverRouter)
      : super(
          router: serverRouter,
          controllers: getControllers(),
          providers: getProviders(),
        );

  // 获取提供者映射
  static Map<Type, InstanceFactory<Object>> getProviders() {
    return {
      SumUsecase: (_) => SumUsecase(),
      SubtractionUsecase: (_) => SubtractionUsecase(),
      MathUsecase: (dependencyManager) {
        final sumUsecase = dependencyManager.get<SumUsecase>();
        final subtractionUsecase = dependencyManager.get<SubtractionUsecase>();
        return MathUsecase(
          sumUsecase,
          subtractionUsecase,
        );
      }
    };
  }

  // 获取控制器工厂集合
  static Set<ShelfControllerFactory> getControllers() {
    return {
      (router, dependencyManager) {
        return TestController(
          router,
          mathUsecase: dependencyManager.get<MathUsecase>(),
        );
      }
    };
  }
}

使用

void main() async {
  final router = Router();

  // 创建并挂载应用
  final shelfApp = await ShelfApp({
    TestModule(router),
  }).mount();

  // 获取模块实例
  final module = await shelfApp.getModule<TestModule>();
  // 获取控制器实例
  final controller = await module.getController<TestController>();

  // 输出测试结果
  print(controller.testSum(1, 1)); // 输出 2
  print(controller.testSubtraction(1, 1)); // 输出 0
}

更多关于Flutter模块化布局插件modular_shelf的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


modular_shelf 是一个用于 Flutter 应用模块化布局的插件，它可以帮助开发者将应用的不同部分（如页面、服务、路由等）模块化，从而提高代码的可维护性和可扩展性。modular_shelf 是 flutter_modular 的一个扩展，它结合了 shelf 的思想，使得模块化设计更加灵活。

以下是使用 modular_shelf 的基本步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 modular_shelf 的依赖：

dependencies:
  flutter:
    sdk: flutter
  modular_shelf: ^1.0.0 # 或者最新的版本

然后运行 flutter pub get 来安装依赖。

2. 创建模块

模块是 modular_shelf 的基本单位，每个模块可以包含路由、服务、控制器等。

创建一个简单的模块：

import 'package:modular_shelf/modular_shelf.dart';

class HomeModule extends Module {
  [@override](/user/override)
  List<Bind> get binds => [];

  [@override](/user/override)
  List<ShelfRouter> get routers => [
        ShelfRouter('/', child: (context) => HomePage()),
      ];
}

3. 创建页面

接下来，创建一个简单的页面：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Welcome to the Home Page!'),
      ),
    );
  }
}

4. 启动应用

在 main.dart 中启动应用并加载模块：

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

import 'home_module.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Modular Shelf Example',
      routeInformationParser: Modular.routeInformationParser,
      routerDelegate: Modular.routerDelegate,
    );
  }
}

5. 运行应用

现在你可以运行你的 Flutter 应用，并看到 HomePage 被加载显示。

6. 添加更多模块和路由

你可以继续添加更多的模块和路由，例如：

class AboutModule extends Module {
 [@override](/user/override)
 List<Bind> get binds => [];

 [@override](/user/override)
 List<ShelfRouter> get routers => [
       ShelfRouter('/about', child: (context) => AboutPage()),
     ];
}

然后在 HomeModule 中引入 AboutModule：

class HomeModule extends Module {
 [@override](/user/override)
 List<Bind> get binds => [];

 [@override](/user/override)
 List<ModularRoute> get routers => [
       ShelfRouter('/', child: (context) => HomePage()),
       ModuleRoute('/about', module: AboutModule()),
     ];
}

7. 导航

你可以使用 Modular.to.navigate 来进行导航：

onPressed: () {
  Modular.to.navigate('/about');
}

8. 依赖注入

modular_shelf 还支持依赖注入。你可以在模块中绑定服务：

class HomeModule extends Module {
 [@override](/user/override)
 List<Bind> get binds => [
       Bind.singleton((_) => MyService()),
     ];

 [@override](/user/override)
 List<ModularRoute> get routers => [
       ShelfRouter('/', child: (context) => HomePage()),
     ];
}

然后在页面中获取服务：

class HomePage extends StatelessWidget {
 final MyService myService = Modular.get();

 [@override](/user/override)
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Home Page'),
     ),
     body: Center(
       child: Text(myService.getMessage()),
     ),
   );
 }
}
回到顶部