# 在 getx 中使用 get_it 管理依赖注入

## 视频 https://www.youtube.com/watch?v=NBog-RdZ1fQ https://www.bilibili.com/video/BV1EG411X7zz/ ## 前言 > 原文 https://ducafecat.com/blog/use-get_it-in-getx 上一节讲了 [freezed](https://ducafecat.com/blog/flutter_application_freezed) 来强化模型 model 的功能。今天来说下如何用 get_it 管理 getx 项目的依赖注入 Dependency Injection。我将会改造我的《[woo实战课程](https://ducafecat.com/course/flutter-woo)》代码来示范说明。

## 代码 https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_get_it ## 参考 https://pub-web.flutter-io.cn/packages/get_it ## 知识点依赖注入（Dependency Injection，DI）是一种软件设计模式，用于管理对象之间的依赖关系。它是控制反转（Inversion of Control，IoC）设计模式的一种具体实现方式。在传统的对象创建和依赖关系管理方式中，一个对象通常负责创建和管理其所依赖的其他对象。这样的设计可能导致代码之间的紧耦合，并且在测试时难以模拟和替换依赖的对象。依赖注入通过将对象的创建和依赖关系的管理转移到外部，来解决这些问题。具体而言，依赖注入将对象的依赖通过构造函数、方法参数、属性注入等方式从外部注入到对象中，而不是由对象自身负责创建和管理依赖。这样可以实现对象之间的解耦，提高代码的可测试性、可维护性和可扩展性。依赖注入的核心思想是：对象只关注自身的职责，而不需要关心如何创建和获取依赖的对象。依赖的对象由外部的容器或框架负责创建和注入进来。这样，对象在使用依赖时只需要声明它们的接口或抽象类，并通过依赖注入的方式获取具体的实现。下面是一个简单的依赖注入示例： ```dart class Logger { void log(String message) { print(message); } } class UserService { final Logger _logger; UserService(this._logger); void login(String username, String password) { // 用户登录逻辑 _logger.log('用户登录：$username'); } } void main() { final logger = Logger(); final userService = UserService(logger); userService.login('john', 'password'); } ``` 在上述代码中，`UserService` 类依赖于 `Logger` 类来记录日志。通过构造函数将 `Logger` 对象注入到 `UserService` 中，使得 `UserService` 可以在需要时使用 `_logger` 来记录日志。通过依赖注入，`UserService` 类与 `Logger` 类之间实现了解耦，`UserService` 不需要关心 `Logger` 对象的创建和管理，只需要声明它所依赖的接口。这样，我们可以方便地替换或模拟 `Logger` 对象，以进行单元测试或灵活地切换不同的日志记录实现。依赖注入的好处包括降低代码的耦合度、提高代码的可测试性和可维护性，以及增强代码的可扩展性和灵活性。它在许多现代的软件开发框架和库中得到广泛应用。 ## 步骤 ### 第一步：创建 getx 项目猫哥这边使用 vscode 插件 "[Flutter GetX Generator - 猫哥](https://marketplace.visualstudio.com/items?itemName=ducafecat.getx-template)" 进行初始不清楚的可以一进步阅读《[我写了个 vscode 插件提升 flutter getx 开发效率 79% | 猫哥](https://www.bilibili.com/video/BV1uM4y1t7EE/?spm_id_from=333.788&vd_source=de1aa2e7b41e1a1a8a3982fa4192c38e)》 ### 第二步：加入 get_it 添加组件 ```shell $ flutter pub add get_it ``` 工具类 lib/common/utils/wp_http.dart ```dart // 拉取数据 wordpress api class WPHttp { late Dio _dio; WPHttp() { // 初始 dio var options = BaseOptions( baseUrl: Constants.wpApiBaseUrl, connectTimeout: const Duration(seconds: 10), // 10000, // 10秒 receiveTimeout: const Duration(seconds: 5), // 5000, // 5秒 headers: {}, contentType: 'application/json; charset=utf-8', responseType: ResponseType.json, ); _dio = Dio(options); // 拦截器 _dio.interceptors.add(RequestInterceptors()); } ... ``` > 完整代码详见 https://github.com/ducafecat/flutter_develop_tips/blob/main/flutter_application_get_it/lib/common/utils/wp_http.dart 全局注入 lib/global.dart ```dart class Global { static final getIt = GetIt.instance; static Future init() async { // 注册单例 - WPHttp getIt.registerSingleton(WPHttp()); } } ``` 初始 main.dart ```dart Future main() async { await Global.init(); runApp(const MyApp()); } ``` ### 第三步：在 getx 控制器中使用 API 拉取数据 lib/common/api/product.dart ```dart import 'package:flutter_application_get_it/global.dart'; import '../index.dart'; /// 商品 api class ProductApi { // 读取单例 wphttp static final _getIt = Global.getIt(); /// 分类列表 static Future> categories() async { var res = await _getIt.get( '/products/categories', ); List categories = []; for (var item in res.data) { categories.add(CategoryModel.fromJson(item)); } // 排序 menuOrder , 小号在前 categories.sort((a, b) => a.menuOrder!.compareTo(b.menuOrder as int)); return categories; } ... ``` > Global.getIt() 通过泛型查找对象控制器 lib/pages/product_list/controller.dart ```dart class ProductListController extends GetxController { ProductListController(); // 商品列表 List products = []; _initData() async { products = await ProductApi.products(ProductsReq()); update(["product_list"]); } void onTap() {} @override void onReady() { super.onReady(); _initData(); } } ``` 视图 lib/pages/product_list/view.dart ```dart // 主视图 Widget _buildView() { return ListView.builder( itemCount: controller.products.length, itemBuilder: (context, index) { return ListTile( title: Text(controller.products[index].name ?? ""), subtitle: Image.network( controller.products[index].images?[0].src ?? "", height: 100, fit: BoxFit.cover, ), ); }, ); } ``` ```dart @override Widget build(BuildContext context) { return GetBuilder( init: ProductListController(), id: "product_list", builder: (_) { return Scaffold( appBar: AppBar(title: const Text("product_list")), body: SafeArea( child: _buildView(), ), ); }, ); } ``` 运行

## 代码 https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_get_it ## 小结在项目中使用 [get_it](https://pub-web.flutter-io.cn/packages/get_it) 可以单例工具类、懒加载业务类、工厂方式实例不同商品、异步初始需要 await 的对象、全局管理用户Auth登录认证、样式切换、等配置信息，而不是用 GetxService 对象。感谢阅读本文如果我有什么错？请在评论中让我知道。我很乐意改进。 --- ## flutter 学习路径 - Flutter 基础篇1 - Dart 语言学习 https://ducafecat.com/course/dart-learn - Flutter 基础篇2 - 快速上手 https://ducafecat.com/course/flutter-quickstart-learn - Flutter 实战1 - Getx Woo 电商APP https://ducafecat.com/course/flutter-woo - Flutter 实战2 - 上架指南 Apple Store、Google Play https://ducafecat.com/course/flutter-upload-apple-google - Flutter 基础篇3 - 仿微信朋友圈 https://ducafecat.com/course/flutter-wechat - Flutter 实战3 - 腾讯 tim 即时通讯开发 https://ducafecat.com/course/flutter-tim --- © 猫哥 ducafecat.com end

标签