Flutter状态管理终极方案GetX第一篇——路由(1),Android程序员必会

getx1.png

getx2.png

代码示例

前言

GetX 是 Flutter 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。

为什么是 GetX,而不是 BLoC、MobX、Provider?

BLoC 非常安全和高效,但是对于初学者来说非常复杂,即使学会,样板代码也很多。

MobX 比 BLoC 更容易,而且是响应式的,但是需要使用一个代码生成器,需要等很久,这降低了生产力。

GetX我喜欢的地方:

  • 轻量。模块单独编译,没用到的功能不会编译进我们的代码。
  • 语法简洁。个人非常喜欢,显而易见且实用,比如路由摆脱了 context 的依赖,Get.to(SomePage())就能导航到新路由。
  • 性能。Provider、BLoC 等只能在父子组件保存状态,同层级模块状态管理需要全局处理,存活在整个应用生命周期。而 GetX 可以随时添加控制器和删除控制器,并且会自动释放使用完的控制器。
  • 依赖注入。提供依赖注入功能,代码层级可以完全分离,甚至依赖注入的代码也是分离的。
  • 丰富的api。许多复杂的操作,使用 GetX 就会有简单的实现。

有的同学看过我写的Flutter状态管理provider的使用和封装,讲解了 Provider 的使用,其实在使用过程中发现了许多痛点,最致命的是 Provider 使用InheritedWidget 来传递相同的监听器,这意味着对其 ChangeNotifier 类的任何访问都必须在父子widget树内。非父子组件的状态管理问题,需要借助别的手段(eventbus,全局,单例),十分痛苦,在改用GetX后,越来越舒服了。


路由

普通路由导航

打开到新的页面:

Get.to(NextScreen());

对应原生路由:

Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {
return NextScreen();
},
));

返回:

Get.back();

对应原生路由:

Navigator.pop(context);

打开新页面,并且用新页面替换旧页面(删除旧页面):

Get.off(NextScreen());

对应原生路由:

Navigator.pushReplacement(context, MaterialPageRoute(
builder: (BuildContext context) {
return NextScreen();
},
));

打开新页面
并删除之前的所有路由:

Get.offAll(NextScreen());

对应原生路由:

Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return NextScreen();
},
),
(Route route) => false,
);

导航到新页面,在返回时接收返回数据:

var data = await Get.to(NextScreen());

对应原生路由:

var data = await Navigator.push(context, MaterialPageRoute(
builder: (BuildContext context) {
return NextScreen();
},
));

带返回值返回前一个路由,配合上面使用:

Get.back(result: ‘success’);

对应原生路由:

Navigator.pop(context, ‘success’);

别名路由导航

  1. 声明别名:

abstract class Routes {
static const Initial = ‘/’;
static const NextScreen = ‘/NextScreen’;

}

  1. 注册路由表:

abstract class AppPages {
static final pages = [
GetPage(
name: Routes.Initial,
page: () => HomePage(),
),
GetPage(
name: Routes.NextScreen,
page: () => NextScreen(),
),
];
}

  1. 替换MaterialApp为GetMaterialApp:

void main() {
runApp(GetMaterialApp(
debugShowCheckedModeBanner: false,
initialRoute: ‘/’,
theme: appThemeData,
defaultTransition: Transition.fade,
getPages: AppPages.pages,
home: HomePage(),
));
}

使用

导航到下一个页面:

Get.toNamed(Routes.NextScreen);

导航到下一个页面并删除前一个页面:

Get.offNamed(Routes.NextScreen);

导航到下一个页面并删除以前所有的页面:

Get.offAllNamed(Routes.NextScreen);

发送数据到别名路由:

Get在这里接受任何东西,无论是一个字符串,一个Map,一个List,甚至一个类的实例。

导航到下一个页面并删除前一个页面:

Get.offNamed(Routes.NextScreen);

导航到下一个页面并删除以前所有的页面:

Get.offAllNamed(Routes.NextScreen);

发送数据到别名路由:

Get在这里接受任何东西,无论是一个字符串,一个Map,一个List,甚至一个类的实例。

<p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">本系列课程讲解 Flutter 开发Provider 、Getx 、Bloc 、Stream 的基本使用与源码分析</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">Provider 是一由社区团队开发谷歌开发者合作完善Provider可以简单理解为跨组件通信但实际上也是一种封装模式本课程将从Provider的最基础使用出发然后到最终的一个商品列表中添加购物车的功能。</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;"> </span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">主体内容分为以下几点 :</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">1 Provider 的基本使用ChangeNotifier、ChangeNotifierProvider、的结合实现计数的修改功能。</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">2 Provider 中获取显示数据的三种方式以及 Provider 通信原理</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">4  TabBar实现的分类标签通过 Provider 进行数据交互 </span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">5  TabBarView 实现的标签页面TabBarView与TabBar联动</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">6  TabBarView 标签页面中ListView构建的列表页面以及ListView数据绑定</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">7  ListView中 点击添加购物车的功能以及解决添加购物车全局刷新问题</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">8 Gextx路由管理</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">9 GetX 的局部更新</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">1GetX 的基本使用 计数案例</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">11 GetX 响应式编程</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">12 搜索框的实时搜索</span></span></p> <p><span style="color: #666666; font-family: 微软雅黑;"><span style="font-size: 14px;">13 GetX 商品列表页面实现添加购物车功能</span></span></p>
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

普通网友

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值