使用Bloc的时候，有一个让我至今为止十分在意的问题，无法真正的跨页面交互！在反复的查阅官方文档后，使用一个全局Bloc的方式，实现了“伪”跨页面交互，详细可查看：flutter_bloc使用解析；fish_redux的广播机制是可以比较完美的实现跨页面交互的，我也写了一篇几万字文章介绍如何使用该框架：fish_redux使用详解，redux层次划分是比较细的，写起来会很费劲；最近尝试了GetX相关功能，解决了我的相当一部分痛点

把整篇文章写完后，我马上把自己的一个demo里面所有Bloc代码全用GetX替换，且去掉了Fluro框架；感觉用Getx虽然会省掉大量的模板代码，但还是有些重复工作：创建文件夹，创建几个必备文件，写那些必须要写的初始化代码和类；略微繁琐，为了对得起GetX给我开发带来的巨大便利，我就花了一些时间，给它写了一个插件！ 上面这重复的代码，文件，文件夹统统能一键生成！

GetX相关优势

• 依赖注入
  • GetX是通过依赖注入的方式，存储相应的XxxGetxController；已经脱离了InheritedWidget那一套玩法，自己手动去管理这些实例，使用场景被大大拓展
  • 简单的思路，却能产生深远的影响：优雅的跨页面功能便是基于这种设计而实现的、获取实例无需BuildContext、GetBuilder自动化的处理及其减少了入参等等
• 跨页面交互
  • 这绝对是GetX的一个优点！对于复杂的生产环境，跨页面交互的场景，实在太常见了，GetX的跨页面交互，实现的也较为优雅
• 路由管理
  • getx内部实现了路由管理，而且用起来，非常简单！bloc没实现路由管理，我不得不找一个star量高的路由框架，就选择了fluro，但是不得不吐槽下，fluro用起来真的很折磨人，每次新建一个页面，最让我抗拒的就是去写fluro路由代码，横跨几个文件来回写，头皮发麻
  • GetX实现了动态路由传参，也就是说直接在命名路由上拼参数，然后能拿到这些拼在路由上的参数，也就是说用flutter写H5，直接能通过Url传值，OMG！可以无脑舍弃复杂的fluro了
• 实现了全局BuildContext
• 国际化，主题实现

如果深度使用过Provider，Bloc这类依赖InheritedWidget建立起的状态管理框架；再看看GetX内部实现思想，就能发现，他们已经是俩种体系的东西了

对此，我来抛出一些问题：InheritedWidget存在什么缺点？为什么其数据传递和路由设计思想对立？为什么getx使用依赖注入？getx的obx自动刷新黑魔法是个什么鬼？

• 对这些感兴趣的小伙伴，可以看看：Flutter GetX深度剖析 | 我们终将走出自己的路（万字图文）

下来将全面的介绍GetX的使用，文章也不分篇水阅读量了，力求一文写清楚，方便大家随时查阅

引入

• 首先导入GetX的插件

复制 1# getx 状态管理框架 https:
 2# 非空安全最后一个版本（flutter 2.0之前版本）
 3get: ^3.26.0
 4    
 5# 空安全版本 最新版本请查看  https:
 6get: ^4.3.8

GetX地址

• Github：jonataslaw/getx
• Pub：get

主入口配置

• 只需要将MaterialApp改成GetMaterialApp即可

复制 1void main() {
 2  runApp(MyApp());
 3}
 4
 5class MyApp extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return GetMaterialApp(
 9      home: CounterGetPage(),
10    );
11  }
12}

• 各模块导包，均使用下面包即可

复制 1import 'package:get/get.dart';

插件

这个getx代码生成插件，我花了不少精力去完善，功能已经比较齐全了，希望对大家有所帮助。

欢迎大家提issue，提issue之前，请务必认真查看文档：GetX代码生成IDEA插件，超详细功能讲解，确保想提的需求，在本插件里面未被实现；上次有个老哥给我连开三个issue，提的需求都是早已实现的功能。。。

说明

插件地址

• Github：getx_template
• Jetbrains：getx_template

插件的功能含义

• Model：生成GetX的模式
  • Default：默认模式，生成三个文件：state，logic，view
  • Easy：简单模式，生成俩个文件：logic，view
• Module Name：模块的名称，请使用大驼峰或小驼峰命名
• 插件详细功能说明，请查阅：GetX代码生成IDEA插件，超详细功能讲解

安装

• 在设置里面选择：Plugins ---> 输入“getx”搜索 ---> 选择名字为：“GeX” ---> 然后安装 ---> 最后记得点击下“Apply”

效果图

• 生成模板代码弹窗

• 提供后缀名修改，也支持了持久化

• Alt + Enter ： 可以选择包裹Widget，有四种可选：GetBuilder、GetBuilder（Auto Dispose），Obx、GetX，大大方便开发哟(＾Ｕ＾)ノ~ＹＯ
  • 如果你发现某个页面，你的GetXController无法回收，可以使用 GetBuilder（Auto Dispose）Wrap 你的 Widget

• 快捷代码片段提示：我自己写了很多，也有一部分直接引用：getx-snippets-intelliJ
  • 输入 getx 前缀便有提示

效果图

• 体验一下

实现

首先，当然是实现一个简单的计数器，来看GetX怎么将逻辑层和界面层解耦的

• 来使用插件生成下简单文件
  • 模式选择：Easy
  • 功能选择：useFolder

来看下生成的默认代码，默认代码十分简单，详细解释放在俩种状态管理里

• logic

复制 1import 'package:get/get.dart';
 2
 3class CounterGetLogic extends GetxController {
 4
 5}

• view

复制 1import 'package:flutter/material.dart';
 2import 'package:get/get.dart';
 3
 4import 'logic.dart';
 5
 6class CounterGetPage extends StatelessWidget {
 7  final logic = Get.put(CounterGetLogic());
 8
 9  @override
10  Widget build(BuildContext context) {
11    return Container();
12  }
13}

简单状态管理

GetBuilder：这是一个极其轻巧的状态管理器，占用资源极少！

• logic：先来看看logic层
  • 因为是处理页面逻辑的，加上Controller单词过长，也防止和Flutter自带的一些控件控制器弄混，所以该层用logic结尾，这里就定为了logic层
  • 当然这点随个人意向，写Event，Controller均可（插件生成代码，支持自定义通用后缀）

复制 1class CounterEasyLogic extends GetxController {
 2  var count = 0;
 3
 4  void increase() {
 5    ++count;
 6    update();
 7  }
 8}

• view

复制 1class CounterEasyPage extends StatelessWidget {
 2  final logic = Get.put(CounterEasyLogic());
 3
 4  @override
 5  Widget build(BuildContext context) {
 6    return Scaffold(
 7      appBar: AppBar(title: const Text('计数器-简单式')),
 8      body: Center(
 9        child: GetBuilder<CounterEasyLogic>(builder: (logic) {
10          return Text(
11            '点击了 ${logic.count} 次',
12            style: TextStyle(fontSize: 30.0),
13          );
14        }),
15      ),
16      floatingActionButton: FloatingActionButton(
17        onPressed: () => logic.increase(),
18        child: Icon(Icons.add),
19      ),
20    );
21  }
22}

• 分析下：GetBuilder这个方法
  • init：虽然上述代码没用到，但是，这个参数是存在在GetBuilder中的，因为在加载变量的时候就使用Get.put()生成了CounterEasyGetLogic对象，GetBuilder会自动查找该对象，所以，就可以不使用init参数
  • builder：方法参数，拥有一个入参，类型便是GetBuilder所传入泛型的类型
  • initState，dispose等：GetBuilder拥有StatefulWidget所有周期回调，可以在相应回调内做一些操作

响应式状态管理

当数据源变化时，将自动执行刷新组件的方法

• logic层
  • 这里变量数值后写.obs操作，是说明定义了该变量为响应式变量，当该变量数值变化时，页面的刷新方法将自动刷新
  • 基础类型，List，类都可以加.obs，使其变成响应式变量

复制 1class CounterRxLogic extends GetxController {
 2  var count = 0.obs;
 3
 4  
 5  void increase() => ++count;
 6}

• view层

复制 1class CounterRxPage extends StatelessWidget {
 2  final logic = Get.put(CounterRxLogic());
 3
 4  @override
 5  Widget build(BuildContext context) {
 6    return Scaffold(
 7      appBar: AppBar(title: const Text('计数器-响应式')),
 8      body: Center(
 9        child: Obx(() {
10          return Text(
11            '点击了 ${logic.count.value} 次',
12            style: TextStyle(fontSize: 30.0),
13          );
14        }),
15      ),
16      floatingActionButton: FloatingActionButton(
17        onPressed: () => logic.increase(),
18        child: Icon(Icons.add),
19      ),
20    );
21  }
22}

• 可以发现刷新组件的方法极其简单：Obx()，这样可以愉快的到处写定点刷新操作了

• Obx()方法刷新的条件

  • 只有当响应式变量的值发生变化时，才会会执行刷新操作，当某个变量初始值为：“test”，再赋值为：“test”，并不会执行刷新操作
  • 当你定义了一个响应式变量，该响应式变量改变时，包裹该响应式变量的Obx()方法才会执行刷新操作，其它的未包裹该响应式变量的Obx()方法并不会执行刷新操作，Cool！

• 来看下如果把整个类对象设置成响应类型，如何实现更新操作呢？

  • 下面解释来自官方README文档
  • 这里尝试了下，将整个类对象设置为响应类型，当你改变了类其中一个变量，然后执行更新操作，只要包裹了该响应类变量的Obx()，都会实行刷新操作，将整个类设置响应类型，需要结合实际场景使用

复制 1
 2
 3class User{
 4    User({this.name = '', this.age = 0});
 5    String name;
 6    int age;
 7}
 8
 9
10final user = User().obs;
11
12user.update( (user) { 
13    user.name = 'Jonny';
14    user.age = 18;
15});
16
17user(User(name: 'João', age: 35));
18
19
20Obx(()=> Text("Name ${user.value.name}: Age: ${user.value.age}"));
21
22user().name; 

总结

• Obx是配合Rx响应式变量使用、GetBuilder是配合update使用：请注意，这完全是俩套定点刷新控件的方案
  • 区别：前者响应式变量变化，Obx自动刷新；后者需要使用update手动调用刷新
• GetBuilder内部实际上是对StatefulWidget的封装，所以占用资源极小

跨页面交互，在复杂的场景中，是非常重要的功能，来看看GetX怎么实现跨页面事件交互的

效果图

• 体验一下
• Cool，这才是真正的跨页面交互！下级页面能随意调用上级页面事件，且关闭页面后，下次重进，数据也很自然重置了（全局Bloc不会重置，需要手动重置）

实现

页面一

常规代码

• logic
  • 这里的自增事件，是供其它页面调用的，该页面本身没使用

复制 1class GetJumpOneLogic extends GetxController {
 2  var count = 0;
 3
 4  
 5  void toJumpTwo() {
 6    Get.toNamed(RouteConfig.getJumpTwo, arguments: {'msg': '我是上个页面传递过来的数据'});
 7  }
 8
 9  
10  void increase() {
11    count = ++count;
12    update();
13  }
14}

• view
  • 此处就一个显示文字和跳转功能

复制 1class GetJumpOnePage extends StatelessWidget {
 2  
 3  final logic = Get.put(GetJumpOneLogic());
 4
 5  @override
 6  Widget build(BuildContext context) {
 7    return Scaffold(
 8      backgroundColor: Colors.white,
 9      appBar: AppBar(title: Text('跨页面-One')),
10      floatingActionButton: FloatingActionButton(
11        onPressed: () => logic.toJumpTwo(),
12        child: const Icon(Icons.arrow_forward_outlined),
13      ),
14      body: Center(
15        child: GetBuilder<GetJumpOneLogic>(
16          builder: (logic) {
17            return Text('跨页面-Two点击了 ${logic.count} 次',
18                style: TextStyle(fontSize: 30.0));
19          },
20        ),
21      ),
22    );
23  }
24}

页面二

这个页面就是重点了

• logic
  • 将演示怎么调用前一个页面的事件
  • 怎么接收上个页面数据
  • 请注意，GetxController包含比较完整的生命周期回调，可以在onInit()接受传递的数据；如果接收的数据需要刷新到界面上，请在onReady回调里面接收数据操作，onReady是在addPostFrameCallback回调中调用，刷新数据的操作在onReady进行，能保证界面是初始加载完毕后才进行页面刷新操作的

复制 1class GetJumpTwoLogic extends GetxController {
 2  var count = 0;
 3  var msg = '';
 4
 5  @override
 6  void onReady() {
 7    var map = Get.arguments;
 8    msg = map['msg'];
 9    update();
10
11    super.onReady();
12  }
13
14  
15  void increase() {
16    count = ++count;
17    update();
18  }
19}

• view
  • 加号的点击事件，点击时，能实现俩个页面数据的变换
  • 重点来了，这里通过Get.find()，获取到了之前实例化GetXController，获取某个模块的GetXController后就很好做了，可以通过这个GetXController去调用相应的事件，也可以通过它，拿到该模块的数据！

复制 1class GetJumpTwoPage extends StatelessWidget {
 2  final oneLogic = Get.find<GetJumpOneLogic>();
 3  final twoLogic = Get.put(GetJumpTwoLogic());
 4
 5  @override
 6  Widget build(BuildContext context) {
 7    return Scaffold(
 8      backgroundColor: Colors.white,
 9      appBar: AppBar(title: Text('跨页面-Two')),
10      floatingActionButton: FloatingActionButton(
11        onPressed: () {
12          oneLogic.increase();
13          twoLogic.increase();
14        },
15        child: const Icon(Icons.add),
16      ),
17      body: Center(
18        child: Column(mainAxisSize: MainAxisSize.min, children: [
19          
20          GetBuilder<GetJumpTwoLogic>(
21            builder: (logic) {
22              return Text('跨页面-Two点击了 ${twoLogic.count} 次',
23                  style: TextStyle(fontSize: 30.0));
24            },
25          ),
26
27          
28          GetBuilder<GetJumpTwoLogic>(
29            builder: (logic) {
30              return Text('传递的数据：${twoLogic.msg}',
31                  style: TextStyle(fontSize: 30.0));
32            },
33          ),
34        ]),
35      ),
36    );
37  }
38}

总结

GetX这种的跨页面交互事件，真的是非常简单了，侵入性也非常的低，不需要在主入口配置什么，在复杂的业务场景下，这样简单的跨页面交互方式，就能实现很多事了

我们可能会遇到过很多复杂的业务场景，在复杂的业务场景下，单单某个模块关于变量的初始化操作可能就非常多，在这个时候，如果还将state（状态层）和logic（逻辑层）写在一起，维护起来可能看的比较晕

这里将状态层和逻辑层进行一个拆分，这样在稍微大一点的项目里使用GetX，也能保证结构足够清晰了！

在这里就继续用计数器举例吧！

实现

此处需要划分三个结构了：state（状态层），logic（逻辑层），view（界面层）

• 这里使用插件生成下模板代码
  • Model：选择Default（默认）
  • Function：useFolder（默认选中）

来看下生成的模板代码

• state

复制 1class GetCounterHighState {
 2  GetCounterHighState() {
 3    
 4  }
 5}

• logic

复制 1import 'package:get/get.dart';
 2
 3import 'state.dart';
 4
 5class GetCounterHighLogic extends GetxController {
 6  final GetCounterHighState state = GetCounterHighState();
 7}

• view

复制 1import 'package:flutter/material.dart';
 2import 'package:get/get.dart';
 3
 4import 'logic.dart';
 5
 6class GetCounterHighPage extends StatelessWidget {
 7  final logic = Get.put(GetCounterHighLogic());
 8  final state = Get.find<GetCounterHighLogic>().state;
 9
10  @override
11  Widget build(BuildContext context) {
12    return Container();
13  }
14}

为什么写成这样三个模块，需要把State单独提出来，请速速浏览下方

改造

• state
  • 这里使用划分出来的state层，来统一管理所有的状态变量
  • 涉及到状态变量定义和Logic层彻底分开

复制 1class GetCounterHighState {
 2  late int count;
 3
 4  GetCounterHighState() {
 5    count = 0;
 6  }
 7}

• logic
  • 逻辑层就比较简单，需要注意的是：开始时需要实例化状态类

复制 1class GetCounterHighLogic extends GetxController {
 2  final GetCounterHighState state = GetCounterHighState();
 3
 4  
 5  void increase() {
 6    state.count = ++state.count;
 7    update();
 8  }
 9}

• view
  • 实际上view层，和之前的几乎没区别，区别的是把状态层给独立出来了
  • 因为CounterHighGetLogic被实例化，所以直接使用Get.find<CounterHighGetLogic>()就能拿到刚刚实例化的逻辑层，然后拿到state，使用单独的变量接收下
  • ok，此时：logic只专注于触发事件交互，state只专注数据

复制 1class GetCounterHighPage extends StatelessWidget {
 2  final logic = Get.put(GetCounterHighLogic());
 3  final state = Get.find<GetCounterHighLogic>().state;
 4
 5  @override
 6  Widget build(BuildContext context) {
 7    return Scaffold(
 8      appBar: AppBar(title: const Text('计数器-进阶版')),
 9      body: Center(
10        child: GetBuilder<GetCounterHighLogic>(
11          builder: (logic) {
12            return Text(
13              '点击了 ${state.count} 次',
14              style: TextStyle(fontSize: 30.0),
15            );
16          },
17        ),
18      ),
19      floatingActionButton: FloatingActionButton(
20        onPressed: () => logic.increase(),
21        child: Icon(Icons.add),
22      ),
23    );
24  }
25}

对比

看了上面的改造，屏幕前的你可能想吐槽了：坑比啊，之前简简单单的逻辑层，被拆成俩个，还搞得这么麻烦，你是猴子请来的逗比吗？

大家先别急着吐槽，当业务过于复杂，state层，也是会维护很多东西的，让我们看看下面的一个小栗子，下面实例代码是不能直接运行的，想看详细运行代码，请查看项目：flutter_use

• state

复制 1class MainState {
 2  
 3  late int selectedIndex;
 4
 5  
 6  late bool isUnfold;
 7
 8  
 9  late bool isScale;
10
11  
12  late List<BtnInfo> list;
13
14  
15  late List<BtnInfo> itemList;
16
17  
18  late List<Widget> pageList;
19  late PageController pageController;
20
21  MainState() {
22    
23    selectedIndex = 0;
24    
25    isUnfold = false;
26    
27    isScale = false;
28    
29    pageList = [
30      KeepAlivePage(FunctionPage()),
31      KeepAlivePage(ExamplePage()),
32      KeepAlivePage(SettingPage()),
33    ];
34    
35    itemList = [
36      BtnInfo(
37        title: "功能",
38        icon: Icon(Icons.bubble_chart),
39      ),
40      BtnInfo(
41        title: "范例",
42        icon: Icon(Icons.opacity),
43      ),
44      BtnInfo(
45        title: "设置",
46        icon: Icon(Icons.settings),
47      ),
48    ];
49    
50    pageController = PageController();
51  }
52}

• logic

复制 1class MainLogic extends GetxController {
 2  final state = MainState();
 3
 4  @override
 5  void onInit() {
 6    
 7    InitConfig.initApp(Get.context);
 8    super.onInit();
 9  }
10
11  
12  void switchTap(int index) {
13    state.selectedIndex = index;
14    state.pageController.jumpToPage(index);
15    update();
16  }
17
18  
19  void onUnfold(bool isUnfold) {
20    state.isUnfold = !state.isUnfold;
21    update();
22  }
23
24  
25  void onScale(bool isScale) {
26    state.isScale = !state.isScale;
27    update();
28
29    initWindow(scale: isScale ? 1.25 : 1.0);
30  }
31}

• view

复制 1class MainPage extends StatelessWidget {
 2  final MainLogic logic = Get.put(MainLogic());
 3  final MainState state = Get.find<MainLogic>().state;
 4
 5  @override
 6  Widget build(BuildContext context) {
 7    return Scaffold(
 8      backgroundColor: Colors.white,
 9      body: Row(children: [
10        
11        GetBuilder<MainLogic>(
12          builder: (logic) {
13            return SideNavigation(
14              selectedIndex: state.selectedIndex,
15              isUnfold: state.isUnfold,
16              isScale: state.isScale,
17              sideItems: state.itemList,
18              
19              onItem: (index) => logic.switchTap(index),
20              
21              onUnfold: (isUnfold) => logic.onUnfold(isUnfold),
22              
23              onScale: (isScale) => logic.onScale(isScale),
24            );
25          },
26        ),
27
28        
29        Expanded(
30          child: PageView.builder(
31            physics: NeverScrollableScrollPhysics(),
32            itemCount: state.pageList.length,
33            itemBuilder: (context, index) => state.pageList[index],
34            controller: state.pageController,
35          ),
36        )
37      ]),
38    );
39  }
40}

从上面可以看出，state层里面的状态已经较多了，当某些模块涉及到大量的：提交表单数据，跳转数据，展示数据等等，state层的代码会相当的多，相信我，真的是非常多，一旦业务发生变更，还要经常维护修改，就蛋筒了

在复杂的业务下，将状态层（state）和业务逻辑层（logic）分开，绝对是个明智的举动

最后

• 该模块的效果图就不放了，和上面计数器效果一模一样，想体验一下，可点击：体验一下
• 简单的业务模块，可以使用俩层结构：logic，view；复杂的业务模块，推荐使用三层结构：state，logic，view

说明

大家可能发现了，插件上增加了addBinding的功能

再加上getx的demo也用了binding，想必各位靓仔就非常想使用这个功能

这个功能实际的作用非常简单

• 统一管理单模块使用的GetXController
• binding模块需要在getx路由页面进行绑定；进入页面的时候，统一懒注入binding模块的GetXController

这样做当然有好处

• 可以统一管理复杂模块的多个GetXController

请注意

• 不建议在Get.to()方法里面进行binding绑定
  • 如果存在多个页面跳转到存在binding页面，你的每个Get.to()方法都需要绑定
  • 这样极其容易出bug，对后面接盘的人，十分不友好
• 使用binding，你理应使用getx的命名路由

郑重申明：不使用binding，并不会对功能有任何的影响

使用

首先必须搭建好路由模块

复制 1void main() {
 2  runApp(MyApp());
 3}
 4
 5class MyApp extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return GetMaterialApp(
 9      initialRoute: RouteConfig.testOne,
10      getPages: RouteConfig.getPages,
11    );
12  }
13}
14
15class RouteConfig {
16  static const String testOne = "/testOne";
17  static const String testTwo = "/testOne/testTwo";
18
19  static final List<GetPage> getPages = [
20    GetPage(
21      name: testOne,
22      page: () => TestOnePage(),
23      binding: TestOneBinding(),
24    ),
25    GetPage(
26      name: testTwo,
27      page: () => TestTwoPage(),
28      binding: TestTwoBinding(),
29    ),
30  ];
31}

创建页面模块

• 选中addBinding功能

• 创建TestOne

复制 1
 2class TestOneLogic extends GetxController {
 3  void jump() => Get.toNamed(RouteConfig.testTwo);
 4}
 5
 6
 7class TestOnePage extends StatelessWidget {
 8  final logic = Get.find<TestOneLogic>();
 9
10  @override
11  Widget build(BuildContext context) {
12    return Scaffold(
13      appBar: AppBar(title: Text('页面一')),
14      body: Center(child: Text('页面一', style: TextStyle(fontSize: 30.0))),
15      floatingActionButton: FloatingActionButton(
16        onPressed: () => logic.jump(),
17        child: Icon(Icons.arrow_forward),
18      ),
19    );
20  }
21}
22
23
24class TestOneBinding extends Bindings {
25  @override
26  void dependencies() {
27    Get.lazyPut(() => TestOneLogic());
28  }
29}

• TestTwo

复制 1
 2class TestTwoLogic extends GetxController {
 3
 4}
 5
 6
 7class TestTwoPage extends StatelessWidget {
 8  final logic = Get.find<TestTwoLogic>();
 9
10  @override
11  Widget build(BuildContext context) {
12    return Scaffold(
13      appBar: AppBar(title: Text('页面二')),
14      body: Center(child: Text('页面二', style: TextStyle(fontSize: 30.0))),
15    );
16  }
17}
18
19
20class TestTwoBinding extends Bindings {
21  @override
22  void dependencies() {
23    Get.lazyPut(() => TestTwoLogic());
24  }
25}

总结

这边我写了一个极其简单的范例，仅仅是个跳转页面的功能，我觉得，应该可以展示binding的功能了

• 就是统一管理某个模块需要注入的多个GetXController
• 请注意，该注入是懒注入，只有使用了 find + 对应的泛型，才会被真正的注入的getx的全局map实例里

实际上，手动写binding文件，还是有点麻烦，写了binding，view层的使用也需要做相应的变动

铁汁们，为了帮你们节省点开发时间，这点浪费你们生命且没什么技术含量的事情，已经在插件里帮你完成

• 有需要的，选中addBinding功能即可

• GetPage里面绑定binding的操作，只能麻烦你们自己动下手了，项目结构千变万化，这玩意没法定位

GetX实现了一套用起来十分简单的路由管理，可以使用一种极其简单的方式导航，也可以使用命名路由导航

关于简单路由和命名路由的区别

• 简单路由：十分简单，看下下面的例子

复制 1Get.to(SomePage());

• 命名路由
  • 在web上，可以直接通过命名的url直接导航页面
  • 实现路由拦截的操作，举一个官方文档的例子：很轻松的实现了一个未登录，跳转登录页面功能

复制 1GetStorage box = GetStorage();
 2
 3GetMaterialApp(
 4  getPages: [
 5    GetPage(name: '/', page:(){
 6      return box.hasData('token') ? Home() : Login();
 7    })
 8  ]
 9)

简单路由

• 主入口配置

复制 1void main() {
 2  runApp(MyApp());
 3}
 4
 5class MyApp extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return GetMaterialApp(
 9      home: MainPage(),
10    );
11  }
12}

• 路由的相关使用
  • 使用是非常简单，使用Get.to()之类api即可，此处简单演示，详细api说明，放在本节结尾

复制 1
 2Get.to(SomePage());

命名路由导航

这里是推荐使用命名路由导航的方式

• 统一管理起了所有页面
• 在app中可能感受不到，但是在web端，加载页面的url地址就是命名路由你所设置字符串，也就是说，在web中，可以直接通过url导航到相关页面

下面说明下，如何使用

• 首先，在主入口出配置下

复制 1void main() {
 2  runApp(MyApp());
 3}
 4
 5class MyApp extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return GetMaterialApp(
 9      initialRoute: RouteConfig.main,
10      getPages: RouteConfig.getPages,
11    );
12  }
13}

• RouteConfig类
  • 下面是我的相关页面，和其映射的页面，请根据自己的页面进行相关编写

复制 1class RouteConfig {
 2  
 3  static const String main = "/";
 4
 5  
 6  static const String smartDialog = "/smartDialog";
 7  static const String himalaya = "/himalaya";
 8  static const String dialog = "/dialog";
 9
10  
11  static const String blCubitCounterPage = "/blCubitCounterPage";
12  static const String blBlocCounterPage = "/blBlocCounterPage";
13  static const String cubitSpanOne = "/cubitSpanOne";
14  static const String cubitSpanTwo = "/cubitSpanOne/cubitSpanTwo";
15  static const String streamPage = "/streamPage";
16  static const String blCustomBuilderPage = "/blCustomBuilderPage";
17  static const String counterEasyCPage = "/counterEasyCPage";
18
19  
20  static const String testLayout = "/testLayout";
21
22  
23  static const String getCounterRx = "/getCounterRx";
24  static const String getCounterEasy = "/counterEasyGet";
25  static const String getCounterHigh = "/counterHighGet";
26  static const String getJumpOne = "/jumpOne";
27  static const String getJumpTwo = "/jumpOne/jumpTwo";
28  static const String getCounterBinding = "/getCounterBinding";
29  static const String counterEasyXBuilderPage = "/counterEasyXBuilder";
30  static const String counterEasyXEbxPage = "/counterEasyXEbx";
31
32  
33  static const String proEasyCounterPage = "/proEasyCounterPage";
34  static const String proHighCounterPage = "/proHighCounterPage";
35  static const String proSpanOnePage = "/proSpanOnePage";
36  static const String proSpanTwoPage = "/proSpanOnePage/proSpanTwoPage";
37  static const String testNotifierPage = "/testNotifierPage";
38  static const String customBuilderPage = "/customBuilderPage";
39  static const String counterEasyPPage = "/counterEasyPPage";
40  static const String counterGlobalEasyPPage = "/counterGlobalEasyPPage";
41
42  
43  static final List<GetPage> getPages = [
44    GetPage(name: main, page: () => MainPage()),
45    GetPage(name: dialog, page: () => DialogPage()),
46    GetPage(name: blCubitCounterPage, page: () => BlCubitCounterPage()),
47    GetPage(name: blBlocCounterPage, page: () => BlBlocCounterPage()),
48    GetPage(name: streamPage, page: () => StreamPage()),
49    GetPage(name: blCustomBuilderPage, page: () => BlCustomBuilderPage()),
50    GetPage(name: counterEasyCPage, page: () => CounterEasyCPage()),
51    GetPage(name: testLayout, page: () => TestLayoutPage()),
52    GetPage(name: smartDialog, page: () => SmartDialogPage()),
53    GetPage(name: cubitSpanOne, page: () => CubitSpanOnePage()),
54    GetPage(name: cubitSpanTwo, page: () => CubitSpanTwoPage()),
55    GetPage(name: getCounterRx, page: () => GetCounterRxPage()),
56    GetPage(name: getCounterEasy, page: () => GetCounterEasyPage()),
57    GetPage(name: getCounterHigh, page: () => GetCounterHighPage()),
58    GetPage(name: getJumpOne, page: () => GetJumpOnePage()),
59    GetPage(name: getJumpTwo, page: () => GetJumpTwoPage()),
60    GetPage(
61      name: getCounterBinding,
62      page: () => GetCounterBindingPage(),
63      binding: GetCounterBinding(),
64    ),
65    GetPage(name: counterEasyXBuilderPage, page: () => EasyXCounterPage()),
66    GetPage(name: counterEasyXEbxPage, page: () => EasyXEbxCounterPage()),
67    GetPage(name: himalaya, page: () => HimalayaPage()),
68    GetPage(name: proEasyCounterPage, page: () => ProEasyCounterPage()),
69    GetPage(name: proHighCounterPage, page: () => ProHighCounterPage()),
70    GetPage(name: proSpanOnePage, page: () => ProSpanOnePage()),
71    GetPage(name: proSpanTwoPage, page: () => ProSpanTwoPage()),
72    GetPage(name: testNotifierPage, page: () => TestNotifierPage()),
73    GetPage(name: customBuilderPage, page: () => CustomBuilderPage()),
74    GetPage(name: counterEasyPPage, page: () => CounterEasyPPage()),
75    GetPage(name: counterGlobalEasyPPage, page: () => CounterGlobalEasyPPage()),
76  ];
77}

路由API

请注意命名路由，只需要在api结尾加上Named即可，举例：

• 默认：Get.to(SomePage());
• 命名路由：Get.toNamed(“/somePage”);

详细Api介绍，下面内容来自GetX的README文档，进行了相关整理

• 导航到新的页面

复制 1Get.to(NextScreen());
 2Get.toNamed("/NextScreen");

• 关闭SnackBars、Dialogs、BottomSheets或任何你通常会用Navigator.pop(context)关闭的东西

复制 1Get.back();

• 进入下一个页面，但没有返回上一个页面的选项（用于SplashScreens，登录页面等）

复制 1Get.off(NextScreen());
 2Get.offNamed("/NextScreen");

• 进入下一个界面并取消之前的所有路由（在购物车、投票和测试中很有用）

复制 1Get.offAll(NextScreen());
 2Get.offAllNamed("/NextScreen");

• 发送数据到其它页面

只要发送你想要的参数即可。Get在这里接受任何东西，无论是一个字符串，一个Map，一个List，甚至一个类的实例。

复制 1Get.to(NextScreen(), arguments: 'Get is the best');
 2Get.toNamed("/NextScreen", arguments: 'Get is the best');

在你的类或控制器上：

复制 1print(Get.arguments);
 2

• 要导航到下一条路由，并在返回后立即接收或更新数据

复制 1var data = await Get.to(Payment());
 2var data = await Get.toNamed("/payment");

• 在另一个页面上，发送前一个路由的数据

复制 1Get.back(result: 'success');
 2
 3if(data == 'success') madeAnything();

• 如果你不想使用GetX语法，只要把 Navigator（大写）改成 navigator（小写），你就可以拥有标准导航的所有功能，而不需要使用context，例如：

复制 1
 2Navigator.of(context).push(
 3  context,
 4  MaterialPageRoute(
 5    builder: (BuildContext context) {
 6      return HomePage();
 7    },
 8  ),
 9);
10
11
12navigator.push(
13  MaterialPageRoute(
14    builder: (_) {
15      return HomePage();
16    },
17  ),
18);
19
20
21Get.to(HomePage());

动态网页链接

• 这是一个非常重要的功能，在web端，可以保证通过url传参数到页面里

Get提供高级动态URL，就像在Web上一样。Web开发者可能已经在Flutter上想要这个功能了，Get也解决了这个问题。

复制 1Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

在你的controller/bloc/stateful/stateless类上：

复制 1print(Get.parameters['id']);
 2
 3print(Get.parameters['name']);
 4

你也可以用Get轻松接收NamedParameters。

复制 1void main() {
 2  runApp(
 3    GetMaterialApp(
 4      initialRoute: '/',
 5      getPages: [
 6      GetPage(
 7        name: '/',
 8        page: () => MyHomePage(),
 9      ),
10      GetPage(
11        name: '/profile/',
12        page: () => MyProfile(),
13      ),
14       
15       GetPage(
16        name: '/profile/:user',
17        page: () => UserProfile(),
18      ),
19      GetPage(
20        name: '/third',
21        page: () => Third(),
22        transition: Transition.cupertino  
23      ),
24     ],
25    )
26  );
27}

发送命名路由数据

复制 1Get.toNamed("/profile/34954");

在第二个页面上，通过参数获取数据

复制 1print(Get.parameters['user']);
 2

现在，你需要做的就是使用Get.toNamed()来导航你的命名路由，不需要任何context(你可以直接从你的BLoC或Controller类中调用你的路由)，当你的应用程序被编译到web时，你的路由将出现在URL中。

关于GetxController的资源释放，这个栏目的内容相当重要！

资源未释放的场景

在我们使用GetX的时候，可能没什么GetxController未被释放的感觉，这种情况，是因为我们一般都是用了getx的那一套路由跳转api（Get.to、Get.toName…）之类：使用Get.toName，肯定需要使用GetPage；如果使用Get.to，是不需要在GetPage中注册的，Get.to的内部有一个添加到GetPageRoute的操作

通过上面会在GetPage注册可知，说明在我们跳转页面的时候，GetX会拿你到页面信息存储起来，加以管理，下面俩种场景会导致GetxController无法释放

• GetxController可被自动释放的条件

  • GetPage+Get.toName配套使用，可释放
  • 直接使用Get.to，可释放

• GetxController无法被自动释放场景

  • 未使用GetX提供的路由跳转：直接使用原生路由api的跳转操作
  • 这样会直接导致GetX无法感知对应页面GetxController的生命周期，会导致其无法释放

复制 1Navigator.push(
 2    context,
 3    MaterialPageRoute(builder: (context) => XxxxPage()),
 4);

由此，可从上面可以看出，GetxController无法被释放的场景：不使用GetX路由

最优解

这里有个最优解方案，就算你不使用Getx路由，也能很轻松回收各个页面的GetXController，感谢 @法的空间 在评论里指出

• 手动让getx感知路由

复制 1void main() {
 2  runApp(MyApp());
 3}
 4
 5class MyApp extends StatelessWidget {
 6  @override
 7  Widget build(BuildContext context) {
 8    return MaterialApp(
 9      home: HomePage,
10      
11      navigatorObservers: [GetXRouterObserver()],
12    );
13  }
14}
15
16
17class GetXRouterObserver extends NavigatorObserver {
18  @override
19  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
20    RouterReportManager.reportCurrentRoute(route);
21  }
22
23  @override
24  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) async {
25    RouterReportManager.reportRouteDispose(route);
26  }
27}

讲真的，这个原理其实很简单，但是思路很有趣；大家点进reportCurrentRoute 和 reportRouteDispose 这俩个方法，大概就知道是怎么回事了

• reportCurrentRoute 就是让当前的路由标定给GetX
• 当我们进入一个页面的时候，相应GetXController会进行初始化，最终会调用 _startController<S>({String? tag})方法
• _startController中会调用RouterReportManager.appendRouteByCreate(i)，将注入的GetXController都保存起来
• 保存在一个map中，key为当前路由route，value为HashSet，可以保存多个GetXController
• ok，路由关闭的时候，在reportRouteDispose方法中回收，key为当前route，遍历value中所有的GetXController回收
• 我giao，基于这种思路，大家能干很多事了！！！

折中方案

如果上面的最优解没法帮你解决GetXController的回收问题，你可能就遇到特殊的场景了，一般来说，分析分析你自己的代码，基本都能分析出来

如果懒得分析原因，就试试下面这种折中方案吧；颗粒度极小，针对单页面维度解决

StatefulWidget方案

这边我模拟了上面场景，写了一个解决方案

• 第一个页面跳转

复制 1Navigator.push(
 2    Get.context,
 3    MaterialPageRoute(builder: (context) => AutoDisposePage()),
 4);

• 演示页面
  • 这地方地方必须要使用StatefulWidget，因为在这种情况，无法感知生命周期，就需要使用StatefulWidget生命周期
  • 在dispose回调处，把当前GetxController从整个GetxController管理链中删除即可

复制 1class AutoDisposePage extends StatefulWidget {
 2  @override
 3  _AutoDisposePageState createState() => _AutoDisposePageState();
 4}
 5
 6class _AutoDisposePageState extends State<AutoDisposePage> {
 7  final AutoDisposeLogic logic = Get.put(AutoDisposeLogic());
 8
 9  @override
10  Widget build(BuildContext context) {
11    return BaseScaffold(
12      appBar: AppBar(title: const Text('计数器-自动释放')),
13      body: Center(
14        child: Obx(
15          () => Text('点击了 ${logic.count.value} 次',
16              style: TextStyle(fontSize: 30.0)),
17        ),
18      ),
19      floatingActionButton: FloatingActionButton(
20        onPressed: () => logic.increase(),
21        child: const Icon(Icons.add),
22      ),
23    );
24  }
25
26  @override
27  void dispose() {
28    Get.delete<AutoDisposeLogic>();
29    super.dispose();
30  }
31}
32
33class AutoDisposeLogic extends GetxController {
34  var count = 0.obs;
35
36  
37  void increase() => ++count;
38}

看到这，你可能会想，啊这！怎么这么麻烦，我怎么还要写StatefulWidget，好麻烦！

各位放心，这个问题，我也想到了，我特地在插件里面加上了自动回收的功能

• 如果你写的页面无法被回收，记得勾选autoDispose
  • 怎么判断页面的GetxController是否能被回收呢？实际上很简单，上面的未被释放的场景已经描述的比较清楚了，不清楚的话，就再看看

来看下代码，default模式一样可以的

• view

复制 1class AutoDisposePage extends StatefulWidget {
 2  @override
 3  _AutoDisposePageState createState() => _AutoDisposePageState();
 4}
 5
 6class _AutoDisposePageState extends State<AutoDisposePage> {
 7  final AutoDisposeLogic logic = Get.put(AutoDisposeLogic());
 8
 9  @override
10    Widget build(BuildContext context) {
11      return Container();
12    }
13
14  @override
15  void dispose() {
16    Get.delete<AutoDisposeLogic>();
17    super.dispose();
18  }
19}

• logic

复制 1class AutoDisposeLogic extends GetxController {
 2
 3}

优化StatefulWidget方案

上面的是个通用解决方法，你不需要额外的引入任何其它的东西；但是这种方案用到了StatefulWidget，代码多了一大坨，让我有点膈应

鄙人有着相当的强迫症，想了很久，从外部入手，我就写了一个通用控件，来对相应的GetXController进行回收

GetBindWidget

• 本控件含义：将GetXController和当前页面的生命周期绑定，页面关闭时，自动回收

• 该控件可以回收单个GetXController（bind参数），可以加上对应tag（tag参数）；也可以回收多个GetXController（binds），可以加上多个tag（tags参数，请和binds 一 一 对应；无tag的GetXController的，tag可以写成空字符：""）

复制 1import 'package:flutter/material.dart';
 2import 'package:get/get.dart';
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25class GetBindWidget extends StatefulWidget {
26  const GetBindWidget({
27    Key? key,
28    this.bind,
29    this.tag,
30    this.binds,
31    this.tags,
32    required this.child,
33  })  : assert(
34          binds == null || tags == null || binds.length == tags.length,
35          'The binds and tags arrays length should be equal\n'
36          'and the elements in the two arrays correspond one-to-one',
37        ),
38        super(key: key);
39
40  final GetxController? bind;
41  final String? tag;
42
43  final List<GetxController>? binds;
44  final List<String>? tags;
45
46  final Widget child;
47
48  @override
49  _GetBindWidgetState createState() => _GetBindWidgetState();
50}
51
52class _GetBindWidgetState extends State<GetBindWidget> {
53  @override
54  Widget build(BuildContext context) {
55    return widget.child;
56  }
57
58  @override
59  void dispose() {
60    _closeGetXController();
61    _closeGetXControllers();
62
63    super.dispose();
64  }
65
66  
67  void _closeGetXController() {
68    if (widget.bind == null) {
69      return;
70    }
71
72    var key = widget.bind.runtimeType.toString() + (widget.tag ?? '');
73    GetInstance().delete(key: key);
74  }
75
76  
77  void _closeGetXControllers() {
78    if (widget.binds == null) {
79      return;
80    }
81
82    for (var i = 0; i < widget.binds!.length; i++) {
83      var type = widget.binds![i].runtimeType.toString();
84
85      if (widget.tags == null) {
86        GetInstance().delete(key: type);
87      } else {
88        var key = type + (widget.tags?[i] ?? '');
89        GetInstance().delete(key: key);
90      }
91    }
92  }
93}

• 使用非常的简单

复制 1
 2class TestPage extends StatelessWidget {
 3  final logic = Get.put(TestLogic());
 4
 5  @override
 6  Widget build(BuildContext context) {
 7    return GetBindWidget(
 8      bind: logic,
 9      child: Container(),
10    );
11  }
12}
13
14
15class TestPage extends StatelessWidget {
16  final logicOne = Get.put(TestLogic(), tag: 'one');
17  final logicTwo = Get.put(TestLogic());
18  final logicThree = Get.put(TestLogic(), tag: 'three');
19
20  @override
21  Widget build(BuildContext context) {
22    return GetBindWidget(
23      binds: [logicOne, logicTwo, logicThree],
24      tags: ['one', '', 'three'],
25      child: Container(),
26    );
27  }
28}
29
30
31[GETX] Instance "TestLogic" has been created with tag "one"
32[GETX] Instance "TestLogic" with tag "one" has been initialized
33[GETX] Instance "TestLogic" has been created
34[GETX] Instance "TestLogic" has been initialized
35[GETX] Instance "TestLogic" has been created with tag "three"
36[GETX] Instance "TestLogic" with tag "three" has been initialized
37[GETX] "TestLogicone" onDelete() called
38[GETX] "TestLogicone" deleted from memory
39[GETX] "TestLogic" onDelete() called
40[GETX] "TestLogic" deleted from memory
41[GETX] "TestLogicthree" onDelete() called
42[GETX] "TestLogicthree" deleted from memory

如果使用中，有比较坑的问题，希望大家在评论里提出来，我会在这个栏目汇总一下

1. 无法跳转重复页面

• 另一种表现形式：使用Get.to（Get.toName）在系统Dialog上跳转页面，未关闭Dialog；返回，再跳转，会出现无法跳转的情况

debug了下to方法内部的运行，发现他用了一个preventDuplicates参数，限制跳转重复页面

• 为什么这样做？
  • 优点：能解决多次点击跳转按钮，跳转多个重复页面的问题
  • 缺点：限制了复杂业务跳转重复页面的场景

当然上面的缺点也不算是缺点，毕竟已经给了参数可以控制

• 跳转重复页面，可以这样写

复制 1Get.to(XxxxPage(), preventDuplicates: false);
 2
 3Get.toNamed('xxx',  preventDuplicates: false);

2. 使用PageView时，所有PageView页面控制器，全被初始化问题

大家使用PageView，添加PageView页面，PageView页面用GetX构成，会发现所有的PageView页面控制器全被初始化了！并不是切换到某个页面时，对应页面的控制器才被初始化！

PageView切换到某个页面的时候，才会调用对应Page页面的build方法；对于PageView页面，控制器的注入过程，不能写在类中了，需要将其移入到build方法中初始化。

• 正常页面，注入写法（非PageView页面）

复制 1class CounterEasyGetPage extends StatelessWidget {
 2  final CounterEasyGetLogic logic = Get.put(CounterEasyGetLogic());
 3
 4  @override
 5  Widget build(BuildContext context) {
 6    return Scaffold(
 7      appBar: AppBar(title: const Text('计数器-简单式')),
 8      body: Center(
 9        child: GetBuilder<CounterEasyGetLogic>(
10          builder: (logicGet) => Text(
11            '点击了 ${logicGet.count} 次',
12            style: TextStyle(fontSize: 30.0),
13          ),
14        ),
15      ),
16      floatingActionButton: FloatingActionButton(
17        onPressed: () => logic.increase(),
18        child: const Icon(Icons.add),
19      ),
20    );
21  }
22}

• PageView页面，初始化位置必须调整

复制 1class CounterEasyGetPage extends StatelessWidget {
 2  @override
 3  Widget build(BuildContext context) {
 4    final CounterEasyGetLogic logic = Get.put(CounterEasyGetLogic());
 5  
 6    return Scaffold(
 7      appBar: AppBar(title: const Text('计数器-简单式')),
 8      body: Center(
 9        child: GetBuilder<CounterEasyGetLogic>(
10          builder: (logicGet) => Text(
11            '点击了 ${logicGet.count} 次',
12            style: TextStyle(fontSize: 30.0),
13          ),
14        ),
15      ),
16      floatingActionButton: FloatingActionButton(
17        onPressed: () => logic.increase(),
18        child: const Icon(Icons.add),
19      ),
20    );
21  }
22}

• 大家如果觉得手动移太麻烦的话，也可以选中插件的 isPageView 功能

相关地址

• 文中DEMO地址：flutter_use
• GetX插件地址：getx_template
• Windows：Windows平台安装包
  • 密码：xdd666

系列文章

引流了，手动滑稽.png

• IDEA插件：GetX代码生成IDEA插件，超详细功能讲解（透过现象看本质）

• GetX原理：Flutter GetX深度剖析 | 我们终将走出自己的路（万字图文）

• 告别克苏鲁代码山：Flutter 改善套娃地狱问题（仿喜马拉雅PC页面举例）

• 让Dialog拥有更多可能：这一次，解决Flutter Dialog的各种痛点！