flutterFlutter Flutter

Flutter框架 - GetX

2021-09-07  本文已影响0人  iKang


GetX是什么

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

GetX的优势

对比provider,GetX可能更受欢迎

下面是GetX在pub上面的likes数据

下面是GetX在github上面的star数据

状态管理

GetX 因为不需要上下文,突破了InheritedWidget的限制,我们可以在全局和模块间共享状态,这正是 BLoc 、Provider 等框架的短板

使用GetX步骤

1、 在MaterialApp前添加 "Get",将其变成GetMaterialApp。

GetMaterialApp的子组件是默认的MaterialApp。GetMaterialApp会创建路由,注入它们,注入翻译,注入你需要的一切路由导航。GetMaterialApp对于路由、snackbar、国际化、bottomSheet、对话框以及与路由相关的高级apis和没有上下文(context)的情况下是必要的。如果只用Get来进行状态管理或依赖管理,就没有必要使用GetMaterialApp。

2、创建业务逻辑类,并将所有的变量,方法和控制器放在里面。 你可以使用一个简单的".obs "使任何变量成为可观察的。

import 'package:get/get.dart';

class MyController extends GetxController {

  var count = 0.obs;

  increment()=>count.value++;

}

3、引用逻辑类,在界面显示

MyController controller = Get.put(MyController());

Obx(() => Text( '您点击了${controller.count}次', style: TextStyle(color: Colors.red,fontSize: 20), ))

几个注意点

1、

var count = 0.obs; 

RxInt count = 0.obs;

效果一样

2、

var count = 0.obs;

increment()=>count.value++;

var count = 0;

  increment(){

    count++;

    update();

  }

效果一样

3、

Obx(() => Text(

                  '您点击了${controller.count}次',

                  style: TextStyle(color: Colors.red, fontSize: 20),

                )),

GetBuilder<MyController>(builder: (_) {

              return Center(child: Text('您点击了${controller.count.toString()}次',style: TextStyle(color: Colors.red,fontSize: 20),));

            }),

效果一样

状态管理的几个方法

1、Obx

2、GetX

3、GetBuilder

4、ValueBuilder

VSCode关于GetX的插件

https://marketplace.visualstudio.com/search?term=Getx&target=VSCode&category=Programming%20Languages&sortBy=Relevance

其他

https://jeffmcmorris.medium.com/getx-flutter-firebase-auth-example-b383c1dd1de2

上一篇下一篇

猜你喜欢

热点阅读