Flutter - GetX Helper 如何应用于旧页面

欢迎关注微信公众号：FSA全栈行动 👋

一、前言

在上一篇【Flutter - GetX Helper 助你规范应用 tag】中，跟大家介绍了 github.com/LinXunFeng/... ，针对新页面的推荐使用姿势，即 Mixin 的方式，但是对于已有的旧页面，可能有着大量的业务代码，我们没办法直接重构它，但是又不想再持续忍受到处写相同的 tag 或者直接传 logic 实例的方式。

那有没有办法将 getx_helper 应用到旧页面呢？答案是有的！

getx_helper 提供了三种方式，Mixin、嵌套子 Widget 和 通过 BuildContext 去获取，并且这三种方式是可以混合使用的！

接下来讲讲如何应用吧。

二、页面

这里假设已存在的旧页面的结构代码如下

class _HomePageState extends State<HomePage> {
  String logicTag = 'lxf';
  late HomeLogic logic = Get.put(HomeLogic(), tag: logicTag);

  @override
  Widget build(BuildContext context) {
    Widget resultWidget = Scaffold(
      appBar: AppBar(),
      body: const Center(child: MyStatelessWidget()),
    );

    return resultWidget;
  }
}

你只需要在页面的根嵌套一层 GetxLogicProvider 即可～

class _HomePageState extends State<HomePage> {
  ...

  @override
  Widget build(BuildContext context) {
    Widget resultWidget = Scaffold(
      ...
    );

    // ====== 嵌套一层 GetxLogicProvider ======
    resultWidget = GetxLogicProvider.put(
      // 只是关联类型，不会创建新的 logic
      HomeLogic.new,
      logicTag: logicTag,
      child: resultWidget,
    );
    // =======================================
    return resultWidget;
  }
}

注：这里建议使用插件提供的代码片段 GH_GetxLogicProvider.put 去快速生成相关代码，避免遗漏重要参数。

三、子部件

方式一: Mixin

基于支持混合使用这一点，推荐大家对于新增的子部件，还是使用上一篇中介绍的通过插件去创建 Widgte 的 Mixin 方式，即右击 widget 目录，选择 GetX: Mixin Widget 去生成 Widget。

方式二: 嵌套子 Widget

对于 StatelessWidget，你可以通过嵌套一层 GetxLogicConsumer.get 去拿到 logic 和 logicTag。

class MyStatelessWidget extends StatelessWidget {
 const MyStatelessWidget({super.key});

 @override
 Widget build(BuildContext context) {
   return GetxLogicConsumer.get(
     // 只是关联类型，不会创建新的 logic
     HomeLogic.new,
     builder: (context, logic, logicTag) {
       // lxf -- logic: Instance of 'HomeLogic' -- logicTag: lxf
       print('lxf -- logic: $logic -- logicTag: $logicTag');
       return const Placeholder();
     },
     // onInitState: (context, logic, logicTag) {},
     // onDispose: (context, logic, logicTag) {},
   );
 }
}

注：这里建议使用插件提供的代码片段 GH_GetxLogicConsumer.get 去快速生成相关代码，避免遗漏重要参数。

当然了，这里还是建议将旧的 StatelessWidget 重构成使用 Mixin 的方式～

方式三: 通过 BuildContext 获取

通过 BuildContext 去获取

// 获取 logic
context.getxLogic<HomeLogic>();
// 获取 logicTag
context.getxTag();

如果你是在 StafulWidget 的 State 中使用，则可以省略前面的 context。

// 获取 logic
getxLogic<HomeLogic>();
// 获取 logicTag
getxTag();

方式三看起来挺简单好用的，但是，它所使用的 BuildContext 的生命周期必须是 .active，具体是什么意思？这里给出一张图就明白了

图片取自 blog.csdn.net/lcl130/arti...

如上图所示，你只能在 initState、didChangeDependencies 和 build 方法中去使用，如果你能保证一定会遵守这个使用规则，那没问题。

四、其它

实现原理

就是基于 InheritedWidget 自上而下去共享了 logicTag 而已，没什么特别的。

基于该实现原理，我们可以不一定要以页面为维度去使用，也可以用于复用的视图模块。

只不过需要注意一点，如果不是以页面为维度，或者不是使用 GetX 的路由，则 logic 并不会被自动回收，这个时候只需要对视图的根 GetBuilder 的 assignId 设置为 true 即可。

// 记得设置 Logic 类型和 tag
GetBuilder<HomeLogic>(
  tag: logicTag,
  assignId: true,
  ...
);

三种方式的关系

前两种方式都是基于方式三去实现的，只是使用了 StatefulWidget 进行了包裹，并且在 initState 中提前将 logic 和 logicTag 取出并记录了起来，从而避免了 BuildContext 的使用限制。

虽然 Flutter 的精髓在于嵌套，但是我们可以通过 Mixin 的方式去优化嵌套～

Logic 构建方法

一般情况下，在使用了 getx_helper 这一套规范之后，我们是不会去修改 Logic 的默认构造方法的，所以上述我们使用 HomeLogic.new 没有任何问题。

但是旧页面可能会在默认构造方法中去接收一些参数，这个时候 HomeLogic.new 就会报错，那怎么解决呢？

上面的注释中也说了，HomeLogic.new 只是关联 HomeLogic 这个类型而已，所以我们可以写一个专门用来关联 Logic 类型的命名构造方法来解决。

class HomeLogic extends GetxController {
  final String region;

  HomeLogic({required this.region});

  HomeLogic.type({this.region = ''});
}

然后将所有的 HomeLogic.new 改为 HomeLogic.type 即可。

五、最后

以上就是 getx_helper 在旧页面应用的使用说明，不得不说，Mixin 的方式比其它方式安全、方便和优雅太多了，所以极力建议大家，能用 Mixin 的方式就用 Mixin 的方式～

开源不易，如果你也觉得这个库好用 (github.com/LinXunFeng/...)，请不吝给个 Star 👍 ，并多多支持！

如果文章对您有所帮助, 请不吝点击关注一下我的微信公众号：FSA全栈行动, 这将是对我最大的激励. 公众号不仅有 Flutter 技术，还有 AI、Android，iOS，Python 等文章, 可能有你想要了解的技能知识点哦~