Flutter之GetX依赖注入tag使用详解

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

本文主要介绍 GetX 依赖注入中 tag 的作用和使用详解。

作用

前面几篇文章介绍了 GetX 依赖注入的使用以及通过源码剖析了依赖注入的原理：

通过源码得知，GetX 依赖注入中 tag 的主要作用是用于区分相同类型依赖的不同实例。与 Dagger 和 koin 中的 named 作用相似。

GetX 依赖注入是通过 Map 缓存依赖关系，默认使用注入依赖的类型名称作为 key 进行缓存，当传入 tag 不为空时则使用类型名称 + tag 组合作为缓存的 key。

源码中关键代码如下：

String _getKey(Type type, String? name) {
  return name == null ? type.toString() : type.toString() + name;
}

其中 name 就是传入的 tag ， type 为依赖对象的类型。

在依赖注入时如果使用了 tag 则必须在 put 、find 中都要加上 tag 参数，且对应的 tag 值一致才能保证注入与获取的依赖对象符合预期。同时如果使用 GetBuilder 作为状态管理时也需要传入对应的 tag 值，示例代码如下：

Get.put(CounterController(), tag: "counter");

CounterController controller = Get.find<CounterController>(tag: "counter");

GetBuilder<CounterController>(
        builder: (controller) {
          return Container();
        },
        tag: "counter");

使用场景

上面介绍了 tag 的作用，那么在什么样的开发场景中会使用到 tag 呢？下面将介绍两种笔者在开发过程中遇到的典型场景。

相同类型不同作用的依赖注入

该场景一般针对基础数据等已有类型，如 String、int 等。虽然类型相同，但是在开发中使用场景或作用不同。

如需要注入网络请求的 baseUrl 和请求认证携带的 token，都为 String 类型，但是作用和使用场景不同，此时如果不加 tag 就只会注入一个，这种情况就可以使用 tag 区分是要注入/获取 baseUrl 还是 token，使用如下：

Get.put("http://juejin.cn", tag: "baseUrl");
Get.put(token, tag: "token");

Get.find(tag: "baseUrl");
Get.find(tag: "token");

相同类型相同作用的不同实例

这种情况注入的依赖类型相同且作用也相同，但是业务上需要不同的实例，一般用于业务复用的情况。

页面中常见的注入对象为 Controller，当页面复用的情况下依赖注入不带 tag 就可能会出现多个页面共用一个 Controller 的情况，因为默认使用依赖对象类型名称作为 key，就会导致不同的页面注入的 Controller 是同一个实例。此时就可以使用 tag 来解决。

比如一个新闻详情界面，在新闻详情界面一般会有相关新闻列表，点击相关的新闻时又会跳转到新的新闻详情界面，在代码中新闻详情界面是只有一个的，但是传入的新闻 id 不同显示不同的新闻内容，如果依赖注入/获取时不带 tag 就回到导致跳转到新的新闻详情界面显示的内容还是上一个界面的内容，因为获取到的 Controller 实例是同一个，导致数据是相同的并没有加载新的新闻内容。具体原理在之前的原理文章做了详细的阐述。

此时就需要用到 tag 来解决，可以使用新闻的 id 作为 tag 以确保不同的新闻展示其对应的内容，并且能做到相同新闻数据共享的效果避免重复加载数据。

路由跳转时携带 tag：

Get.to(NewsPage(tag: id,), arguments:{"id" : id});

NewPage 获取依赖：

class NewsPage extends StatelessWidget {

  final String? tag;
  final NewsController controller;
  NewsPage({Key? key, this.tag}) :
        controller = Get.put(NewsController(), tag: tag),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("News"),
        ),
        body: GetBuilder<NewsController>(
          builder: (controller) {
            return Container(); /// news content
          },
          tag: tag,
        ));
  }
}

在 Controller 里获取路由参数然后加载数据：

class NewsController extends GetxController{
  @override
  void onInit() {
    super.onInit();
    var id = Get.arguments["id"];
    /// load new data
  }
}

如果使用的 Binding 注入依赖关系，则 Binding 也需要传入 tag ：

class NewsBinding extends Bindings{
  final String? tag;
  NewsBinding({this.tag});
  @override
  void dependencies() {
    Get.lazyPut(() => NewsController(), tag: tag);
  }
}

然后路由跳转时：

Get.to(NewsPage(tag: id,), arguments:{"id" : id}, binding: NewsBinding(tag: id));

界面获取依赖：

class NewsPage extends StatelessWidget {

  final String? tag;
  const NewsPage({Key? key, this.tag}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    NewsController controller = Get.find(tag: tag);
    return Scaffold(
        appBar: AppBar(
          title: const Text("News"),
        ),
        body: GetBuilder<NewsController>(
          builder: (controller) {
            return Container(); /// news content
          },
          tag: tag,
        ));
  }
}

除了像详情页跳转详情页这种跳转同一页面的场景还有页面嵌套复用时也可以使用这种方式解决依赖注入的问题，比如 A 页面内容里嵌套了 B 页面，又存在跳转 B 页面的业务，则可以使用 tag 灵活解决依赖注入问题，本质也是同一个页面存在不同的实例，与上面介绍的示例一样。

总结

在开发过程中依赖注入时灵活使用 tag 可以解决很多复杂的业务场景，提高代码的复用性。

更多关于 GetX 依赖注入的文章传送门：