写点什么

Flutter GetX 使用 --- 简洁的魅力!

用户头像
小呆呆666
关注
发布于: 5 小时前

前言

使用 Bloc 的时候,有一个让我至今为止十分在意的问题,无法真正的跨页面交互!在反复的查阅官方文档后,使用一个全局 Bloc 的方式,实现了“伪”跨页面交互,详细可查看:flutter_bloc使用解析;fish_redux 的广播机制是可以比较完美的实现跨页面交互的,我也写了一篇近万字介绍如何使用该框架:fish_redux使用详解,对于中小型项目使用 fish_redux,这会一定程度上降低开发效率,最近尝试了 GetX 相关功能,解决了我的相当一部分痛点


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


GetX 相关优势


  • 依赖注入

  • GetX 是通过依赖注入的方式,存储相应的 XxxGetxController;已经脱离了 InheritedWidget 那一套玩法,自己手动去管理这些实例,使用场景被大大拓展

  • 简单的思路,却能产生深远的影响:优雅的跨页面功能便是基于这种设计而实现的、获取实例无需 BuildContext、GetBuilder 自动化的处理及其减少了入参等等

  • 跨页面交互

  • 这绝对是 GetX 的一个优点!对于复杂的生产环境,跨页面交互的场景,实在太常见了,GetX 的跨页面交互,几乎和 fish_redux 一样简单,爱了爱了

  • 路由管理

  • 是的,getx 内部实现了路由管理,而且用起来,那叫一个简单!bloc 没实现路由管理,这让我不得不去找一个 star 量高的路由管理框架,就选择了 fluro,但是让我不得不说,这个 fluro 用起来真的叫一个折磨人,每次新建一个页面,最让我抗拒的就是去写 fluro 路由代码,横跨几个文件来回写,真是肝疼

  • GetX 实现了动态路由传参,也就是说直接在命名路由上拼参数,然后能拿到这些拼在路由上的参数,也就是说用 flutter 写 H5,直接能通过 Url 传值(fluro 也能做到),OMG!可以无脑舍弃复杂的 fluro 了

  • 实现了全局 BuildContext

  • 国际化,主题实现


Getx 的跨页面功能非常优雅,这还考虑啥,开搞!


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

准备

引入

  • 首先导入 GetX 的插件


# getx 状态管理框架 https://pub.flutter-io.cn/packages/get# 非空安全最后一个版本(flutter 2.0之前版本)get: ^3.26.0    # 空安全版本 最新版本请查看  https://pub.flutter-io.cn/packages/getget: ^4.1.3
复制代码


GetX 地址


主入口配置

  • 只需要将MaterialApp改成GetMaterialApp即可


void main() {  runApp(MyApp());}
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( home: CounterGetPage(), ); }}
复制代码


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


import 'package:get/get.dart';
复制代码

插件

吐槽下写插件的过程,实际写这种模板代码生成插件,其实也不难,网上有很多人写了范例,参考参考思路,能较快的整出来,就是有些配置比较蛋筒。

一开始选择 Plugin DevKit 模式整的,都已经写好,但是看官网文档的时候,官方文档开头就说了:建议使用 Gradle 模式开发插件,又巴拉巴拉列了一堆好处;考虑良久,决定用 Gradle 模式重写。

这个 Gradle 模式,最烦的还是开头新建项目的时候,那个 Gradle 死活下载不下来,科学全局上网都不行,然后手动下载了 Gradle,指定本地 Gradle,开全局再次同步时,会下载一个较大的社区版 IDEA,但是使用本地 Gradle 加载完,存在一个很大的 BUG!main 文件夹下,不会自动生成 Java 文件夹!我真是佛了,点击其它的文件夹,右击:New -> Plugin DevKit 居然不会没有 Action 选项,差点把我劝退了,换了了七八个版本 IDEA 试了都不行!Action 选项出不来,过了俩天后,晚上无意尝试在 main 文件夹下面新建了一个 Java 文件,然后在这个 java 文件上右击:New -> Plugin DevKit,Action 选项出现了!真几把佛了。。。

还有个巨坑的问题,在 Gradle 模式下开发插件,把模板代码文件放在 main 文件下、放在 src 下、放在根目录下,都获取不到文件里面的内容,这个真是坑了我不少时间,搜了很多博客,都发现没写这个问题,官方文档范例看了几遍也没发现有啥说明,后来找到了一个三年前的项目,翻了翻代码发现,所有的资源文件都必须放在 resources 文件夹下,才能读取到文件内容。。。我勒个去。。。

说明

  • 插件地址

  • Github:getx_template

  • Jetbrains:getx_template

  • 插件效果

  • 看下插件使用的效果图吧,样式参考了 fish_redux 插件样式

  • 有一些可选择的功能,所以做成多按钮的样式,大家可以按照自己的需求进行操作

  • 说下插件的功能含义

  • Model:生成 GetX 的模式,

  • Default:默认模式,生成三个文件:state,logic,view

  • Easy:简单模式,生成俩个文件:logic,view

  • Function:功能选择

  • useFolder:使用文件,选择后会生成文件夹,大驼峰命名自动转换为:小写+下划线

  • usePrefix:使用前缀,生成的文件前加上前缀,前缀为:大驼峰命名自动转换为:小写+下划线

  • Module Name:模块的名称,请使用大驼峰命名

效果图

  • 生成模板代码



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



  • Alt + Enter : 可以选择包裹 Widget,有三种可选(GetBuilder、Obx、GetX),大大方便开发哟(^U^)ノ~YO



  • 快捷代码片段提示:我自己写了俩个,其它的快捷代码来自:getx-snippets-intelliJ

  • 输入 get 前缀便有提示


安装

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

  • 如果在使用该插件的过程中有什么问题,请在该项目的 github 上给我提 issue,我看到后,会尽快处理


计数器

效果图


实现

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


  • 来使用插件生成下简单文件

  • 模式选择:Easy

  • 功能选择:useFolder



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


  • logic


import 'package:get/get.dart';
class CounterGetLogic extends GetxController {
}
复制代码


  • view


import 'package:flutter/material.dart';import 'package:get/get.dart';
import 'logic.dart';
class CounterGetPage extends StatelessWidget { final CounterGetLogic logic = Get.put(CounterGetLogic());
@override Widget build(BuildContext context) { return Container(); }}
复制代码

响应式状态管理

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


  • logic 层

  • 因为是处理页面逻辑的,加上 Controller 单词过长,也防止和 Flutter 自带的一些控件控制器弄混,所以该层用logic结尾,这里就定为了logic层,当然这点随个人意向,写 Event,Controller 均可

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


class CounterGetLogic extends GetxController {  var count = 0.obs;
///自增 void increase() => ++count;}
复制代码


  • view 层

  • 这地方获取到 Logic 层的实例后,就可进行操作了,大家可能会想:WTF,为什么实例的操作放在 build 方法里?逗我呢?--------- 实际不然,stl 是无状态组件,说明了他就不会被二次重组,所以实例操作只会被执行一次,而且 Obx()方法是可以刷新组件的,完美解决刷新组件问题了


    class CounterGetPage extends StatelessWidget {      @override      Widget build(BuildContext context) {        CounterGetLogic logic = Get.put(CounterGetLogic());            return Scaffold(          appBar: AppBar(title: const Text('GetX计数器')),          body: Center(            child: Obx(              () => Text('点击了 ${logic.count.value} 次',                  style: TextStyle(fontSize: 30.0)),            ),          ),          floatingActionButton: FloatingActionButton(            onPressed: () => logic.increase(),            child: const Icon(Icons.add),          ),        );      }    }
复制代码


  • 当然,也可以这样写


    class CounterGetPage extends StatelessWidget {      final CounterGetLogic logic = Get.put(CounterGetLogic());          @override      Widget build(BuildContext context) {        return Scaffold(          appBar: AppBar(title: const Text('GetX计数器')),          body: Center(            child: Obx(              () => Text('点击了 ${logic.count.value} 次',                  style: TextStyle(fontSize: 30.0)),            ),          ),          floatingActionButton: FloatingActionButton(            onPressed: () => logic.increase(),            child: const Icon(Icons.add),          ),        );      }    }
复制代码


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

  • Obx()方法刷新的条件

  • 只有当响应式变量的值发生变化时,才会会执行刷新操作,当某个变量初始值为:“test”,再赋值为:“test”,并不会执行刷新操作

  • 当你定义了一个响应式变量,该响应式变量改变时,包裹该响应式变量的 Obx()方法才会执行刷新操作,其它的未包裹该响应式变量的 Obx()方法并不会执行刷新操作,Cool!

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

  • 下面解释来自官方 README 文档

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


// model// 我们将使整个类成为可观察的,而不是每个属性。class User{    User({this.name = '', this.age = 0});    String name;    int age;}
// controllerfinal user = User().obs;//当你需要更新user变量时。user.update( (user) { // 这个参数是你要更新的类本身。 user.name = 'Jonny'; user.age = 18;});// 更新user变量的另一种方式。user(User(name: 'João', age: 35));
// viewObx(()=> Text("Name ${user.value.name}: Age: ${user.value.age}"));// 你也可以不使用.value来访问模型值。user().name; // 注意是user变量,而不是类变量(首字母是小写的)。
复制代码

简单状态管理

GetBuilder:这是一个极其轻巧的状态管理器,占用资源极少!


  • logic:先来看看 logic 层


class CounterEasyGetLogic extends GetxController {  var count = 0;
void increase() { ++count; update(); }}
复制代码


  • view


class CounterEasyGetPage extends StatelessWidget {  final CounterEasyGetLogic logic = Get.put(CounterEasyGetLogic());
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('计数器-简单式')), body: Center( child: GetBuilder<CounterEasyGetLogic>( builder: (logicGet) => Text( '点击了 ${logicGet.count} 次', style: TextStyle(fontSize: 30.0), ), ), ), floatingActionButton: FloatingActionButton( onPressed: () => logic.increase(), child: const Icon(Icons.add), ), ); }}
复制代码


  • 分析下:GetBuilder 这个方法

  • init:虽然上述代码没用到,但是,这个参数是存在在 GetBuilder 中的,因为在加载变量的时候就使用Get.put()生成了CounterEasyGetLogic对象,GetBuilder 会自动查找该对象,所以,就可以不使用 init 参数

  • builder:方法参数,拥有一个入参,类型便是 GetBuilder 所传入泛型的类型

  • initState,dispose 等:GetBuilder 拥有 StatefulWidget 所有周期回调,可以在相应回调内做一些操作

总结

分析


  • Obx 是配合 Rx 响应式变量使用、GetBuilder 是配合 update 使用:请注意,这完全是俩套定点刷新控件的方案

  • 区别:前者响应式变量变化,Obx 自动刷新;后者需要使用 update 手动调用刷新

  • 响应式变量,因为使用的是StreamBuilder,会消耗一定资源

  • GetBuilder内部实际上是对 StatefulWidget 的封装,所以占用资源极小


使用场景


  • 一般来说,对于大多数场景都是可以使用响应式变量的

  • 但是,在一个包含了大量对象的 List,都使用响应式变量,将生成大量的StreamBuilder,必将对内存造成较大的压力,该情况下,就要考虑使用简单状态管理了

  • 总的来说:推荐 GetBuilder 和 update 配合的写法

  • GetBuilder 内置回收 GetxController 的功能,能避免一些无法自动回收 GetxController 的坑爹问题

  • 使用 Obx,相关变量定义初始化以及实体更新和常规写法不同,会对初次接触该框架的人,造成很大的困扰

  • getx 插件现已支持一键 Wrap Widget 生成 GetBuilder,可以一定程度上提升你的开发效率

跨页面交互

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

效果图

  • 体验一下

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


实现

页面一

常规代码


  • logic

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


class GetJumpOneLogic extends GetxController {  var count = 0;
///跳转到跨页面 void toJumpTwo() { Get.toNamed(RouteConfig.getJumpTwo, arguments: {'msg': '我是上个页面传递过来的数据'}); }
///跳转到跨页面 void increase() { count = ++count; update(); }}
复制代码


  • view

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


class GetJumpOnePage extends StatelessWidget {  /// 使用Get.put()实例化你的类,使其对当下的所有子路由可用。  final GetJumpOneLogic logic = Get.put(GetJumpOneLogic());
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar(title: Text('跨页面-One')), floatingActionButton: FloatingActionButton( onPressed: () => logic.toJumpTwo(), child: const Icon(Icons.arrow_forward_outlined), ), body: Center( child: GetBuilder<GetJumpOneLogic>( builder: (logic) { return Text('跨页面-Two点击了 ${logic.count} 次', style: TextStyle(fontSize: 30.0)); }, ), ), ); }}
复制代码

页面二

这个页面就是重点了


  • logic

  • 将演示怎么调用前一个页面的事件

  • 怎么接收上个页面数据

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


class GetJumpTwoLogic extends GetxController {  var count = 0;  var msg = '';
@override void onReady() { var map = Get.arguments; msg = map['msg']; update();
super.onReady(); }
///跳转到跨页面 void increase() { count = ++count; update(); }}
复制代码


  • view

  • 加号的点击事件,点击时,能实现俩个页面数据的变换

  • 重点来了,这里通过Get.find(),获取到了之前实例化 GetXController,获取某个模块的 GetXController 后就很好做了,可以通过这个 GetXController 去调用相应的事件,也可以通过它,拿到该模块的数据!


class GetJumpTwoPage extends StatelessWidget {  final GetJumpOneLogic oneLogic = Get.find();  final GetJumpTwoLogic twoLogic = Get.put(GetJumpTwoLogic());
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar(title: Text('跨页面-Two')), floatingActionButton: FloatingActionButton( onPressed: () { oneLogic.increase(); twoLogic.increase(); }, child: const Icon(Icons.add), ), body: Center( child: Column(mainAxisSize: MainAxisSize.min, children: [ //计数显示 GetBuilder<GetJumpTwoLogic>( builder: (logic) { return Text('跨页面-Two点击了 ${twoLogic.count} 次', style: TextStyle(fontSize: 30.0)); }, ),
//传递数据 GetBuilder<GetJumpTwoLogic>( builder: (logic) { return Text('传递的数据:${twoLogic.msg}', style: TextStyle(fontSize: 30.0)); }, ), ]), ), ); }}
复制代码

总结

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

进阶吧!计数器

我们可能会遇到过很多复杂的业务场景,在复杂的业务场景下,单单某个模块关于变量的初始化操作可能就非常多,在这个时候,如果还将 state(状态层)和 logic(逻辑层)写在一起,维护起来可能看的比较晕,这里将状态层和逻辑层进行一个拆分,这样在稍微大一点的项目里使用 GetX,也能保证结构足够清晰了!


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

实现

此处需要划分三个结构了:state(状态层),logic(逻辑层),view(界面层)


  • 这里使用插件生成下模板代码

  • Model:选择 Default(默认)

  • Function:useFolder(默认中)



来看下生成的模板代码


  • state


class CounterHighGetState {  CounterHighGetState() {    ///Initialize variables  }}
复制代码


  • logic


import 'package:get/get.dart';
import 'state.dart';
class CounterHighGetLogic extends GetxController { final state = CounterHighGetState();}
复制代码


  • view


import 'package:flutter/material.dart';import 'package:get/get.dart';
import 'logic.dart';import 'state.dart';
class CounterHighGetPage extends StatelessWidget { final CounterHighGetLogic logic = Get.put(CounterHighGetLogic()); final CounterHighGetState state = Get.find<CounterHighGetLogic>().state;
@override Widget build(BuildContext context) { return Container(); }}
复制代码


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

改造

  • state

  • 这里可以发现,count 类型使用的是RxInt,没有使用var,使用该变量类型的原因,此处是将所有的操作都放在构造函数里面初始化,如果直接使用var没有立马赋值,是无法推导为Rx类型,所以这里直接定义为RxInt,实际很简单,基础类型将开头字母大写,然后加上Rx前缀即可

  • 实际上直接使用var也是可以的,但是,使用该响应变量的时候.value无法提示,需要自己手写,所以还是老老实实的写明 Rx 具体类型吧

  • 详细可查看:声明响应式变量


class GetCounterHighState {  late int count;
GetCounterHighState() { count = 0; }}
复制代码


  • logic

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


class GetCounterHighLogic extends GetxController {  final state = GetCounterHighState();
///自增 void increase() { state.count = ++state.count; update(); }}
复制代码


  • view

  • 实际上 view 层,和之前的几乎没区别,区别的是把状态层给独立出来了

  • 因为CounterHighGetLogic被实例化,所以直接使用Get.find<CounterHighGetLogic>()就能拿到刚刚实例化的逻辑层,然后拿到 state,使用单独的变量接收下

  • ok,此时:logic 只专注于触发事件交互,state 只专注数据


class GetCounterHighPage extends StatelessWidget {  final GetCounterHighLogic logic = Get.put(GetCounterHighLogic());  final GetCounterHighState state = Get.find<GetCounterHighLogic>().state;
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('计数器-进阶版')), body: Center( child: GetBuilder<GetCounterHighLogic>( builder: (logic) { return Text( '点击了 ${state.count} 次', style: TextStyle(fontSize: 30.0), ); }, ), ), floatingActionButton: FloatingActionButton( onPressed: () => logic.increase(), child: Icon(Icons.add), ), ); }}
复制代码

对比

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

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


  • state


class MainState {  ///选择index  late int selectedIndex;
///控制是否展开 late bool isUnfold;
///是否缩放 late bool isScale;
///分类按钮数据源 late List<BtnInfo> list;
///Navigation的item信息 late List<BtnInfo> itemList;
///PageView页面 late List<Widget> pageList; late PageController pageController;
MainState() { //初始化index selectedIndex = 0; //默认不展开 isUnfold = false; //默认不缩放 isScale = false; //PageView页面 pageList = [ KeepAlivePage(FunctionPage()), KeepAlivePage(ExamplePage()), KeepAlivePage(SettingPage()), ]; //item栏目 itemList = [ BtnInfo( title: "功能", icon: Icon(Icons.bubble_chart), ), BtnInfo( title: "范例", icon: Icon(Icons.opacity), ), BtnInfo( title: "设置", icon: Icon(Icons.settings), ), ]; //页面控制器 pageController = PageController(); }}
复制代码


  • logic


class MainLogic extends GetxController {  final state = MainState();
@override void onInit() { ///初始化应用信息 InitConfig.initApp(Get.context); super.onInit(); }
///切换tab void switchTap(int index) { state.selectedIndex = index; state.pageController.jumpToPage(index); update(); }
///是否展开侧边栏 void onUnfold(bool isUnfold) { state.isUnfold = !state.isUnfold; update(); }
///是否缩放 void onScale(bool isScale) { state.isScale = !state.isScale; update();
initWindow(scale: isScale ? 1.25 : 1.0); }}
复制代码


  • view


class MainPage extends StatelessWidget {  final MainLogic logic = Get.put(MainLogic());  final MainState state = Get.find<MainLogic>().state;
@override Widget build(BuildContext context) { return BaseScaffold( backgroundColor: Colors.white, body: Row(children: [ ///侧边栏区域 GetBuilder<MainLogic>( builder: (logic) { return SideNavigation( selectedIndex: state.selectedIndex, isUnfold: state.isUnfold, isScale: state.isScale, sideItems: state.itemList, //点击item onItem: (index) => logic.switchTap(index), //展开侧边栏 onUnfold: (isUnfold) => logic.onUnfold(isUnfold), //缩放整体布局 onScale: (isScale) => logic.onScale(isScale), ); }, ),
///Expanded占满剩下的空间 Expanded( child: PageView.builder( physics: NeverScrollableScrollPhysics(), itemCount: state.pageList.length, itemBuilder: (context, index) => state.pageList[index], controller: state.pageController, ), ) ]), ); }}
复制代码


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


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

最后

  • 该模块的效果图就不放了,和上面计数器效果一模一样,想体验一下,可点击:体验一下

  • 简单的业务模块,可以使用俩层结构:logic,view;复杂的业务模块,推荐使用三层结构:state,logic,view

路由管理

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


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


  • 简单路由:十分简单,看下下面的例子


Get.to(SomePage());
复制代码


  • 命名路由

  • 在 web 上,可以直接通过命名的 url 直接导航页面

  • 实现路由拦截的操作,举一个官方文档的例子:很轻松的实现了一个未登录,跳转登录页面功能


GetStorage box = GetStorage();
GetMaterialApp( getPages: [ GetPage(name: '/', page:(){ return box.hasData('token') ? Home() : Login(); }) ])
复制代码

简单路由

  • 主入口配置


void main() {  runApp(MyApp());}
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( home: MainPage(), ); }}
复制代码


  • 路由的相关使用

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


//跳转新页面Get.to(SomePage());
复制代码

命名路由导航

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


  • 统一管理起了所有页面

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


下面说明下,如何使用


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


void main() {  runApp(MyApp());}
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( initialRoute: RouteConfig.main, getPages: RouteConfig.getPages, ); }}
复制代码


  • RouteConfig 类

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


class RouteConfig {  ///主页面  static final String main = "/";
///演示SmartDialog控件 喜马拉雅 dialog页面 static final String smartDialog = "/smartDialog"; static final String himalaya = "/himalaya"; static final String dialog = "/dialog";
///bloc计数器模块 Bloc跨页面传递事件 static final String blCubitCounterPage = "/blCubitCounterPage"; static final String blBlocCounterPage = "/blBlocCounterPage"; static final String cubitSpanOne = "/cubitSpanOne"; static final String cubitSpanTwo = "/cubitSpanOne/cubitSpanTwo"; static final String streamPage = "/streamPage"; static final String blCustomBuilderPage = "/blCustomBuilderPage"; static final String counterEasyCPage = "/counterEasyCPage";
///测试布局页面 static final String testLayout = "/testLayout";
///GetX 计数器 跨页面交互 static final String getCounterRx = "/getCounterRx"; static final String getCounterEasy = "/counterEasyGet"; static final String getCounterHigh = "/counterHighGet"; static final String getJumpOne = "/jumpOne"; static final String getJumpTwo = "/jumpOne/jumpTwo"; static final String getCounterBinding = "/getCounterBinding";
///Provider static final String proEasyCounterPage = "/proEasyCounterPage"; static final String proHighCounterPage = "/proHighCounterPage"; static final String proSpanOnePage = "/proSpanOnePage"; static final String proSpanTwoPage = "/proSpanOnePage/proSpanTwoPage"; static final String testNotifierPage = "/testNotifierPage"; static final String customBuilderPage = "/customBuilderPage"; static final String counterEasyPPage = "/counterEasyPPage"; static final String counterGlobalEasyPPage = "/counterGlobalEasyPPage";
///别名映射页面 static final List<GetPage> getPages = [ GetPage(name: main, page: () => MainPage()), GetPage(name: dialog, page: () => DialogPage()), GetPage(name: blCubitCounterPage, page: () => BlCubitCounterPage()), GetPage(name: blBlocCounterPage, page: () => BlBlocCounterPage()), GetPage(name: streamPage, page: () => StreamPage()), GetPage(name: blCustomBuilderPage, page: () => BlCustomBuilderPage()), GetPage(name: counterEasyCPage, page: () => CounterEasyCPage()), GetPage(name: testLayout, page: () => TestLayoutPage()), GetPage(name: smartDialog, page: () => SmartDialogPage()), GetPage(name: cubitSpanOne, page: () => CubitSpanOnePage()), GetPage(name: cubitSpanTwo, page: () => CubitSpanTwoPage()), GetPage(name: getCounterRx, page: () => GetCounterRxPage()), GetPage(name: getCounterEasy, page: () => GetCounterEasyPage()), GetPage(name: getCounterHigh, page: () => GetCounterHighPage()), GetPage(name: getJumpOne, page: () => GetJumpOnePage()), GetPage(name: getJumpTwo, page: () => GetJumpTwoPage()), GetPage( name: getCounterBinding, page: () => GetCounterBindingPage(), binding: GetCounterBinding(), ), GetPage(name: himalaya, page: () => HimalayaPage()), GetPage(name: proEasyCounterPage, page: () => ProEasyCounterPage()), GetPage(name: proHighCounterPage, page: () => ProHighCounterPage()), GetPage(name: proSpanOnePage, page: () => ProSpanOnePage()), GetPage(name: proSpanTwoPage, page: () => ProSpanTwoPage()), GetPage(name: testNotifierPage, page: () => TestNotifierPage()), GetPage(name: customBuilderPage, page: () => CustomBuilderPage()), GetPage(name: counterEasyPPage, page: () => CounterEasyPPage()), GetPage(name: counterGlobalEasyPPage, page: () => CounterGlobalEasyPPage()), ];}
复制代码

路由 API

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


  • 默认:Get.to(SomePage());

  • 命名路由:Get.toNamed(“/somePage”);


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


  • 导航到新的页面


Get.to(NextScreen());Get.toNamed("/NextScreen");
复制代码


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


Get.back();
复制代码


  • 进入下一个页面,但没有返回上一个页面的选项(用于 SplashScreens,登录页面等)


Get.off(NextScreen());Get.offNamed("/NextScreen");
复制代码


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


Get.offAll(NextScreen());Get.offAllNamed("/NextScreen");
复制代码


  • 发送数据到其它页面


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


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


在你的类或控制器上:


print(Get.arguments);//print out: Get is the best
复制代码


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


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


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


Get.back(result: 'success');// 并使用它,例:if(data == 'success') madeAnything();
复制代码


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


// 默认的Flutter导航Navigator.of(context).push(  context,  MaterialPageRoute(    builder: (BuildContext context) {      return HomePage();    },  ),);
// 使用Flutter语法获得,而不需要context。navigator.push( MaterialPageRoute( builder: (_) { return HomePage(); }, ),);
// get语法Get.to(HomePage());
复制代码


动态网页链接


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


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


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


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


print(Get.parameters['id']);// out: 354print(Get.parameters['name']);// out: Enzo
复制代码


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


void main() {  runApp(    GetMaterialApp(      initialRoute: '/',      getPages: [      GetPage(        name: '/',        page: () => MyHomePage(),      ),      GetPage(        name: '/profile/',        page: () => MyProfile(),      ),       //你可以为有参数的路由定义一个不同的页面,也可以为没有参数的路由定义一个不同的页面,但是你必须在不接收参数的路由上使用斜杠"/",就像上面说的那样。       GetPage(        name: '/profile/:user',        page: () => UserProfile(),      ),      GetPage(        name: '/third',        page: () => Third(),        transition: Transition.cupertino        ),     ],    )  );}
复制代码


发送命名路由数据


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


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


print(Get.parameters['user']);// out: 34954
复制代码


现在,你需要做的就是使用 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 无法释放


  • 未使用 GetX 提供的路由跳转:直接使用原生路由 api 的跳转操作

  • 这样会直接导致 GetX 无法感知对应页面 GetxController 的生命周期,会导致其无法释放

  • 在 GetPage 注册页面,不使用 Get.toName,这样无法释放;GetPage+Get.toName 配套使用可释放

  • 直接使用 Get.to,可释放


Navigator.push(    context,    MaterialPageRoute(builder: (context) => XxxxPage()),);
复制代码


  • 一般 app 都是,一个主页面,加几个 tab:首页、信息流页、操作页、个人中心之类

  • 如果你遇到需要重新登录,再回到主页,你可能会发现个人中心这些页面的 GetxController 控制未被回收!

  • 这些页面已经和上面的路由页面无关了,因为他们本身只能算是主页面上的几个 tab 子页面,没法用路由去标定绑定关系

解决方案

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


  • 第一个页面跳转


Navigator.push(    Get.context,    MaterialPageRoute(builder: (context) => AutoDisposePage()),);
复制代码


  • 演示页面

  • 这地方地方必须要使用 StatefulWidget,因为在这种情况,无法感知生命周期,就需要使用 StatefulWidget 生命周期

  • 在 dispose 回调处,把当前 GetxController 从整个 GetxController 管理链中删除即可


class AutoDisposePage extends StatefulWidget {  @override  _AutoDisposePageState createState() => _AutoDisposePageState();}
class _AutoDisposePageState extends State<AutoDisposePage> { final AutoDisposeLogic logic = Get.put(AutoDisposeLogic());
@override Widget build(BuildContext context) { return BaseScaffold( appBar: AppBar(title: const Text('计数器-自动释放')), body: Center( child: Obx( () => Text('点击了 ${logic.count.value} 次', style: TextStyle(fontSize: 30.0)), ), ), floatingActionButton: FloatingActionButton( onPressed: () => logic.increase(), child: const Icon(Icons.add), ), ); }
@override void dispose() { Get.delete<AutoDisposeLogic>(); super.dispose(); }}
class AutoDisposeLogic extends GetxController { var count = 0.obs;
///自增 void increase() => ++count;}
复制代码


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

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


  • 如果你写的页面无法被回收,记得勾选 autoDispose

  • 怎么判断页面的 GetxController 是否能被回收呢?实际上很简单,上面的未被释放的场景已经描述的比较清楚了,不清楚的话,就再看看



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


  • view


class AutoDisposePage extends StatefulWidget {  @override  _AutoDisposePageState createState() => _AutoDisposePageState();}
class _AutoDisposePageState extends State<AutoDisposePage> { final AutoDisposeLogic logic = Get.put(AutoDisposeLogic());
@override Widget build(BuildContext context) { return Container(); }
@override void dispose() { Get.delete<AutoDisposeLogic>(); super.dispose(); }}
复制代码


  • logic


class AutoDisposeLogic extends GetxController {
}
复制代码

一些问题汇总

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


  1. 使用 Get.to(Get.toName)在系统 Dialog 上跳转页面,未关闭 Dialog;返回,再跳转,会出现无法跳转的情况


debug 了下 to 方法内部的运行,在系统 Dialog 上跳转,然后回来再跳转;会导致内部路由不匹配,从而 return,然后跳转失败


他的内部 api,给了一个解决方案


  • 在系统 Dialog 上跳转页面,可以这样写


Get.to(XxxxPage(), preventDuplicates: false);// 或者Get.toNamed('xxx',  preventDuplicates: false);
复制代码

最后

相关地址

系列文章

引流了,手动滑稽.jp


发布于: 5 小时前阅读数: 2
用户头像

小呆呆666

关注

2021,葬爱不在低调 2020.08.17 加入

还未添加个人简介

评论

发布
暂无评论
Flutter GetX使用---简洁的魅力!