0. get 文档链接地址

1. 安装

  1. dependencies:
  2.   get: ^3.23.1

2. update() 数据动态化更新视图-方法1

image.png

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. // 使用 GetMaterialApp()
  5. void main() => runApp(GetMaterialApp(home: Home()));
  7. // 定义自己的控制器, 想 更新视图，都需要 调用 update() 方法
  8. class Controller extends GetxController {
  9.   var count = 0;
  10.   increment() {
  11.     count++;
  12.     update();
  13.   }
  14. }
  16. // 在页面中使用定义的数据源
  17. class Home extends StatelessWidget {
  18.   // 定义控制器的实例
  19.   final Controller controller = Get.put(Controller());
  21.   @override
  22.   Widget build(context) {
  23.     return Scaffold(
  24.       appBar: AppBar(title: Text("getx基础使用")),
  25.       body: Center(
  26.         child: Column(
  27.           children: [
  28.             GetBuilder<Controller>(
  29.               builder: (_) => Text(
  30.                 "${controller.count}",
  31.                 style: TextStyle(color: Colors.black, fontSize: 25.0),
  32.               ),
  33.             ),
  34.             RaisedButton(
  35.               onPressed: () => controller.increment(),
  36.               child: Text("+1"),
  37.             ),
  38.           ],
  39.         ),
  40.       ),
  41.     );
  42.   }
  43. }

2.1 简单计数器案例

  • 更新全部的视图 ```dart import ‘package:flutter/material.dart’; import ‘package:get/get.dart’;

// 创建初始数据源 class Controller extends GetxController { int _counter = 0; int get counter => _counter; void increment() { _counter++; update(); } }

class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { print(‘SimplePage—build’); // 使用 GetBuilder 创建UI return GetBuilder( init: SimpleController(), builder: (controller) { return Scaffold( appBar: AppBar(title: Text(‘Simple’)), body: Center( child: Text(controller.counter.toString()), ), floatingActionButton: FloatingActionButton( onPressed: () { controller.increment(); }, child: Icon(Icons.add), ), ); }, ); } }

  1. <a name="vkSAz"></a>
  2. #### 2.2 计数器案例，只更新局部UI
  4. - GetBuilder 只包裹需要更新的视图部分
  5. - 使用 `Get.find<SimpleController>()` 找到方法
  6. ```dart
  7. import 'package:flutter/material.dart';
  8. import 'package:get/get.dart';
  10. class SimpleController extends GetxController {
  11.   int _counter = 0;
  12.   int get counter => _counter;
  14.   void increment() {
  15.     _counter++;
  16.     update();
  17.   }
  18. }
  20. class HomePage extends StatelessWidget {
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     print('SimplePage--build');
  24.     return Scaffold(
  25.       appBar: AppBar(title: Text('Simple')),
  26.       body: Center(
  27.         // GetBuilder 只包裹需要更新的部分
  28.         child: GetBuilder<SimpleController>(
  29.           init: SimpleController(),
  30.           builder: (c) {
  31.             return Text("${c.counter}");
  32.           },
  33.         ),
  34.       ),
  35.       floatingActionButton: FloatingActionButton(
  36.         onPressed: () {
  37.           //使用 Get.find<T>() 找到定义的方法
  38.           Get.find<SimpleController>().increment();
  39.         },
  40.         child: Icon(Icons.add),
  41.       ),
  42.     );
  43.   }
  44. }

2.3 GetxController有生命周期的

  1. class SimpleController extends GetxController {
  2.   int _counter = 0;
  3.   int get counter => _counter;
  5.   void increment() {
  6.     _counter++;
  7.     update();
  8.   }
  10.   @override
  11.   void onInit() {
  12.     super.onInit();
  13.     print('SimpleController--onInit');
  14.   }
  16.   @override
  17.   void onReady() {
  18.     super.onReady();
  19.     print('SimpleController--onReady');
  20.   }
  22.   @override
  23.   void onClose() {
  24.     super.onClose();
  25.     print('SimpleController--onClose');
  26.   }
  27. }

3. GetX() || Obx() 数据动态化更新视图-方法2

和第一种方法差不多， 但是需要使用 .obs后缀，和调用 Obx() 方法

  1. 如果想让你的数据 具备动态化， 就需要在数据的后缀加上 .obs
  2. 在需要改变视图的地方，调用Obx 方法，返回一个 widget

image.png

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. // 使用 GetMaterialApp()
  5. void main() => runApp(GetMaterialApp(home: Home()));
  7. // 定义自己的控制器 , 需要在引起视图变化的数据后加上 .obs
  8. class Controller extends GetxController {
  9.   var count = 0.obs;
  10.   // var count = RxInt(0);
  11.   void increment() => count++;
  12. }
  14. // 在页面中使用定义的数据源
  15. class Home extends StatelessWidget {
  16.   // 定义控制器的实例
  17.   final Controller controller = Get.put(Controller());
  19.   @override
  20.   Widget build(context) {
  21.     return Scaffold(
  22.       appBar: AppBar(title: Text("getx基础使用2")),
  23.       body: Center(
  24.         child: Column(
  25.           children: [
  26.             /// 通过使用 Obx（）方法
  27.             Obx(
  28.               () => Text(
  29.                 "${controller.count}",
  30.               ),
  31.             ),
  32.             RaisedButton(
  33.               onPressed: () => controller.increment(),
  34.               child: Text("+1"),
  35.             ),
  36.           ],
  37.         ),
  38.       ),
  39.     );
  40.   }
  41. }

4. 使用 Bindings接口 和 GetView类

1. 定义自己的控制器

  1. // 定义自己的控制器
  2. class HomeController extends GetxController {
  3.   var count = 0.obs;
  4.   void increment() => count++;
  5. }

2. 实现 Bindings 接口, 重写 dependencies 方法

  1. // 实现 Bindings 接口
  2. class HomeBinding implements Bindings {
  3.   @override
  4.   void dependencies() {
  5.     // 使用Get.lazyPut() 方法推入控制器
  6.     Get.lazyPut(() => HomeController());
  7.   }
  8. }

3.继承 GetView类, 泛型T: 你要使用的控制器

  1. class Home extends GetView<HomeController> {
  2.   @override
  3.   Widget build(context) => Scaffold(
  4.         appBar: AppBar(title: Text("使用Binding 和 GetView")),
  5.         body: Center(
  6.           child: Obx(() => Text("数据源：${controller.count}")),
  7.         ),
  8.         floatingActionButton: FloatingActionButton(
  9.           child: Icon(Icons.add),
  10.           onPressed: controller.increment,
  11.         ),
  12.       );
  13. }

4. 在 main函数中配置

通过使用 GetPage(name， page，binding) 方法给每个页面注入不同的依赖，

  1. void main() {
  2.   runApp(GetMaterialApp(
  3.     initialRoute: '/',
  4.     getPages: [
  5.       GetPage(name: '/', page: () => Home(), binding: HomeBinding()),
  6.     ],
  7.   ));
  8. }

5.路由

0. 定义路由

  1. void main() {
  2.   runApp(
  3.     GetMaterialApp(
  4.       initialRoute: '/',
  5.       getPages: [
  6.         GetPage(name: '/', page: () => MyHomePage()),
  7.         GetPage(name: '/second', page: () => Second()),
  8.         GetPage(
  9.           name: '/third',
  10.           page: () => Third(),
  11.           transition: Transition.zoom  
  12.         ),
  13.       ],
  14.     )
  15.   );
  16. }

1. 使用Get.to(page，{其它可选参数}) 进行跳转

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. main(List<String> args) {
  5.   runApp(GetMaterialApp(home: Home()));
  6. }
  8. class Home extends StatelessWidget {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Scaffold(
  12.       appBar: AppBar(
  13.         title: Text("Home- Page 路由跳转"),
  14.       ),
  15.       body: FlatButton(
  16.         onPressed: () {
  17.           Get.to(Mine());
  18.         },
  19.         child: Text("go to mine"),
  20.       ),
  21.     );
  22.   }
  23. }
  25. class Mine extends StatelessWidget {
  26.   @override
  27.   Widget build(BuildContext context) {
  28.     return Scaffold(
  29.       appBar: AppBar(
  30.         title: Text("Mine- page"),
  31.       ),
  32.       body: Text("Mine- page"),
  33.     );
  34.   }
  35. }

2. Get.toNamed() 进行命名路由跳转

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. main(List<String> args) {
  5.   runApp(GetMaterialApp(
  6.     home: Home(),
  7.     // 配置命名路由
  8.     getPages: [
  9.       GetPage(name: "/mine", page: () => Mine()),
  10.     ],
  11.   ));
  12. }
  14. // Get.toNamed("/mine");
  15. class Home extends StatelessWidget {
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return Scaffold(
  19.       appBar: AppBar(
  20.         title: Text("Home- Page 路由跳转"),
  21.       ),
  22.       body: FlatButton(
  23.         onPressed: () {
  24.           Get.toNamed("/mine");
  25.         },
  26.         child: Text("go to mine"),
  27.       ),
  28.     );
  29.   }
  30. }
  32. class Mine extends StatelessWidget {
  33.   @override
  34.   Widget build(BuildContext context) {
  35.     return Scaffold(
  36.       appBar: AppBar(
  37.         title: Text("Mine- page"),
  38.       ),
  39.       body: Text("Mine- page"),
  40.     );
  41.   }
  42. }

3. 使用 Get.back() 返回上个页面

  1. class Mine extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Scaffold(
  5.       appBar: AppBar(
  6.         title: Text("Mine- page"),
  7.       ),
  8.       body: FlatButton(
  9.         //也可以这样写 onPressed: Get.back,
  10.         onPressed: () {
  11.           Get.back();
  12.         },
  13.         child: Text("返回上个页面"),
  14.       ),
  15.     );
  16.   }
  17. }

4. 使用Get.off() || Get.offAll() 跳转页面

  • Get.off() 导航到下一个页面并删除前一个页面
  • Get.offAll() 导航到下一个页面并删除以前所有的页面

    该方法和 Get.to() 实现的效果一样， 但是使用此方法跳转后，在下一个页面，不能再返回前一个页面, 可以用在 登录页，获取退出页面，这样登录后，或者退出页面后，就不能再返回到前一个页面

  1. class Home extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Scaffold(
  5.       appBar: AppBar(
  6.         title: Text("Home- Page 路由跳转"),
  7.       ),
  8.       body: FlatButton(
  9.         onPressed: () {
  10.           Get.off(Mine());
  11.         },
  12.         child: Text("go to mine"),
  13.       ),
  14.     );
  15.   }
  16. }

5. arguments传参数和arguments参数接收

  1. // Get.to(Mine(), arguments: '我是参数'); 进行传参
  2. class Home extends StatelessWidget {
  3.   @override
  4.   Widget build(BuildContext context) {
  5.     return Scaffold(
  6.       appBar: AppBar(
  7.         title: Text("Home- Page 路由跳转"),
  8.       ),
  9.       body: FlatButton(
  10.         onPressed: () {
  11.           Get.to(Mine(), arguments: '我是参数');
  12.         },
  13.         child: Text("go to mine"),
  14.       ),
  15.     );
  16.   }
  17. }
  18. // 使用 Get.arguments 接收参数
  19. class Mine extends StatelessWidget {
  20.   @override
  21.   Widget build(BuildContext context) {
  22.     String name = Get.arguments;
  23.     print(name);
  24.     return Scaffold(
  25.       appBar: AppBar(
  26.         title: Text("Mine- page"),
  27.       ),
  28.       body: FlatButton(
  29.         onPressed: () {
  30.           Get.back();
  31.         },
  32.         child: Text("返回上个页面"),
  33.       ),
  34.     );
  35.   }
  36. }

6. 像web一样携带参数（url?name=李四&age=12） 模式传参 和 参数的接收

  1. class Home extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Scaffold(
  5.       appBar: AppBar(
  6.         title: Text("Home- Page 路由跳转"),
  7.       ),
  8.       body: FlatButton(
  9.         onPressed: () {
  10.           Get.toNamed("/mine?name=李四&age=12");
  11.         },
  12.         child: Text("go to mine"),
  13.       ),
  14.     );
  15.   }
  16. }
  18. class Mine extends StatelessWidget {
  19.   @override
  20.   Widget build(BuildContext context) {
  21.     // 参数接收
  22.     String age = Get.parameters['age'];
  23.     print(age);
  24.     String name = Get.parameters['name'];
  25.     print(name);
  27.     return Scaffold(
  28.       appBar: AppBar(
  29.         title: Text("Mine- page"),
  30.       ),
  31.     );
  32.   }
  33. }

7. 动态命名路由传参（/profile/:user）

  • 同上边那种接收参数方法一样 ```dart main(List args) { runApp(GetMaterialApp( home: Home(), // 配置命名路由 getPages: [
    1. GetPage(name: "/mine/:name/:age", page: () => Mine()),
    ], )); } class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold(
    1. appBar: AppBar(
    2.   title: Text("Home- Page 路由跳转"),
    3. ),
    4. body: FlatButton(
    5.   onPressed: () {
    6.     // 传参
    7.     Get.toNamed("/mine/李四/12");
    8.   },
    9.   child: Text("go to mine"),
    10. ),
    ); } }

class Mine extends StatelessWidget { @override Widget build(BuildContext context) { // 接收参数 String age = Get.parameters[‘age’]; print(age); String name = Get.parameters[‘name’]; print(name);

  1. return Scaffold(
  2.   appBar: AppBar(
  3.     title: Text("Mine- page"),
  4.   ),
  5. );

} }

  1. <a name="wtkBk"></a>
  2. #### 8. await Get.to()导航到下一条路由，并在返回后立即接收或更新数据。
  3. <a name="Xz8Ph"></a>
  4. # 
  5. <a name="Ppjbg"></a>
  6. # 5. GetMaterialApp 类
  7. > 该类和 MaterialApp 类用法基本类似，具体参考源码
  9. - 官方例子，参考下
  10. ```dart
  11. void main() {
  12.   runApp(GetMaterialApp(
  13.     initialRoute: '/home',
  14.     defaultTransition: Transition.native,
  15.     translations: MyTranslations(),
  16.     locale: Locale('pt', 'BR'),
  17.     getPages: [
  18.       GetPage(name: '/home', page: () => First()),
  19.     ],
  20.   ));
  21. }