GetX--Flutter开发框架

本文最后更新于：2023年8月14日 下午

GetX

GetX是个Flutter开发框架，当你用原生Flutter开发一个APP，受尽折磨之后，你就能体会到这个框架的优雅了，真香！

1、路由

1
2
3
4
5
6
7
8
9
10
11
12
/// 新开页面ddd
Get.toNamed('/ddd');
/// replace
Get.offNamed('/ddd');
/// 返回
Get.back();
/// 新开bbb，清空aaa之后的路由栈
Get.offNamedUntil('/bbb', ModalRoute.withName('/aaa'));
/// 返回bbb，清空bbb之后的路由栈
Get.until(ModalRoute.withName('/bbb'));
/// 新开bbb，清空所有路由栈
Get.offAllNamed('/bbb');

2、状态管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1、obs配合obx
/// view
Obx(() {return Text('我是数据${state.ob['a']}');}),
/// model数据监听
Map<String,dynamic> ob = {
  'a':55,
  'b':66
}.obs;
2、update配合getbuilder
/// view
GetBuilder<PageaaaLogic>(builder: (logic) {return Text('我是数据${state.aNumber}');}),
/// model 关键词 update
void setNumber(){
  state.aNumber+=5;
  update();
}

3、跨页面通信

1
2
3
4
5
6
7
8
9
10
11
/// 页面B正常写，页面C有点不一样
/// 取到B的logic
final bLogic = Get.find<PagebbbLogic>();
///操作B的方法
ElevatedButton(
  child: new Text('在页面上调用B的方法，更新B页面数据'),
  onPressed: () {
    bLogic.setNumber();
  },
),
///真尼玛简单

4、全局变量和数据固化

嗯，还是 SharedPreferences  永远的神

5、弹框

https://www.jianshu.com/p/169af33a5994

1
2
3
4
5
6
/// 类似应用内部的自定义推送，挺好看，可以自定义内容，但是只能在top和bottom，还可以设置点击事件
Get.snackbar("Snackbar 标题", "欢迎使用Snackbar",backgroundColor:Colors.cyan,snackPosition: SnackPosition.TOP);
/// 弹框，不需要context，自定义内容，按钮等等，好用极了，关闭的时候就是Get.back()
Get.defaultDialog();
/// bottomSheet，是要做actionsheet吗？要自己写全套，这只是个弹出层
Get.bottomSheet();

6、主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/// 真尼玛简单啊
/// 搞个theme文件，指定背景，状态栏，按钮等等，之前我以为只是一个颜色，肤浅了！！！
class Themes {
  static final green = ThemeData.light().copyWith(
    scaffoldBackgroundColor: Colors.green,
    appBarTheme: const AppBarTheme(
        backgroundColor: Colors.green,
        toolbarTextStyle:TextStyle(color: Colors.white, fontSize: 30)),
  );
  static final yellow = ThemeData.light().copyWith(
      scaffoldBackgroundColor: Colors.yellow,
      appBarTheme: const AppBarTheme(
          backgroundColor: Colors.yellow,
          toolbarTextStyle:TextStyle(color: Colors.white, fontSize: 30)),
          elevatedButtonTheme: ElevatedButtonThemeData(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.deepOrange))));
}
/// 感觉main.dart写不写没啥关系啊
return GetMaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
)
/// 关键的就这么一句
Get.changeTheme(Themes.yellow);

7、网络

还是用dio，术业有专攻吧，感觉GetConnect的错误处理不如dio

8、插件介绍

https://juejin.cn/post/7005003323753365517—文件生成器介绍篇

easy模式就够我们用了

pageview要特殊处理一下

9、api

1
2
3
4
5
6
7
8
/// 我就想知道find和put的区别，其他的还是看文档吧
/// https://juejin.cn/post/6910920929199521800  这个就很不错
/// 依赖注入是什么---本来接受各种参数来构造一个对象，现在只接受一个参数——已经实例化的对象。
/// 依赖注入是为了将依赖组件的配置和使用分离开，以降低使用者与依赖之间的耦合度。
/// 注入依赖
Get.put<PutController>(PutController());
/// 获取依赖
Get.find<PutController>();

10、组件

没有合适的整套的

https://github.com/felixblaschke/simple_animations—这个动画应该有用

11、生命周期

参考：https://zhuanlan.zhihu.com/p/445371503

常用的就是：

onInit（初始化，页面加载到内存中触发）；

onReady（就绪，处理接口，业务逻辑）；

onClose（销毁，删除监听事件）

另外的onResume等等，要用 WidgetsBindingObserver，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import 'package:flutter/cupertino.dart';
import 'package:get/get.dart';
import 'state.dart';
class PagebbbLogic extends GetxController with WidgetsBindingObserver {
  final PagebbbState state = PagebbbState();
  void setNumber(){
    state.bNumber+=5;
  }
  void setOb(){
    state.ob['a'] += 5;
  }
  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    print('init');
    WidgetsBinding.instance?.addObserver(this); /// 添加监听
  }
  @override
  void onReady() {
    // TODO: implement onInit
    super.onReady();
    print('onReady');
    var map = Get.arguments;
    print(map);
  }
  @override
  void onClose() {
    // TODO: implement onClose
    super.onClose();
    print('onClose');
    WidgetsBinding.instance?.removeObserver(this); /// 删除监听
  }
  @override
  Future didChangeAppLifecycleState(AppLifecycleState state) async {
    print(state);
    switch (state) {
      case AppLifecycleState.inactive: // 处于这种状态的应用程序应该假设它们可能在任何时候暂停。
        print("inactive");
        break;
      case AppLifecycleState.resumed:// 应用程序可见，后台返回至前台
        print("进入resumed");
        break;
      case AppLifecycleState.paused: // 应用程序不可见，进入后台
        print("进入后台paused");
        break;
      case AppLifecycleState.detached: // 申请将暂时暂停
        break;
      default:
    }
  }
}

12、小知识

https://github.com/jonataslaw/getx#dependency-management—-官方文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 页面传参
Get.arguments
// give name of previous route
Get.previousRoute
// 平台
GetPlatform.isAndroid
GetPlatform.isIOS
// check if snackbar is open
Get.isSnackbarOpen
// check if dialog is open
Get.isDialogOpen
// check if bottomsheet is open
Get.isBottomSheetOpen
// Equivalent to : MediaQuery.of(context).size.height,
// but immutable.
Get.height
Get.width
// 获取当前context，插件会用到
Get.context
// Gives the context of the snackbar/dialog/bottomsheet in the foreground, anywhere in your code.
Get.contextOverlay

12、原理

https://juejin.cn/post/6909445601269088270

https://juejin.cn/post/6984593635681517582#heading-19

数据刷新的原理：

    1、GetBuilder加手动update：GetBuilder实际上是个 StatefulWidget，update底层实际上是setState();

    2、obx加obs：obx继承ObxWidget，ObxWidget实际上也继承了StatefulWidget，obx初始化的时候会**RxNotifier()**订阅包含的obs变量的变化 ，obs值发生变化就会触发setState()；

    —obs是在原数据的基础上内置callback的数据类型，数据变动触发callback，就是触发obx刷新；

所以表面上看我们使用get框架写的页面都是StatelessWidget，实际上涉及数据操作的部分，底层还是StatefulWidget，万变不离其宗。

无context的路由跳转原理：

源码直接就能看到，用的就是原始的无context跳转：navigatorKey.currentState.pushNamed(‘/home’)

参考链接：

https://segmentfault.com/a/1190000039139198—好文章，介绍篇

https://juejin.cn/post/7005003323753365517—文件生成器介绍篇

https://juejin.cn/post/6984593635681517582—-原理篇

Flutter
#Flutter
GetX--Flutter开发框架
http://bestkele.com/2022/01/10/flutter/GetX/
作者
kele
发布于
2022年1月10日
许可协议