flutter开发实战-GetX响应式状态管理使用

GetX是一个简单的响应式状态管理解决方案。GetX是Flutter的一款超轻、功能强大的解决方案。它将高性能状态管理、智能依赖注入和路由管理快速而实用地结合在一起。这里简单使用一下GetX

一、引入GetX

在工程的pubspec.yaml中引入插件

  get: 4.6.5

GetX功能强大，里面包括routes, snackbars, internationalization, bottomSheets, dialogs等等，使用这些功能可以将MaterialApp更改成GetMaterialApp。但是我这里暂时不使用到这些功能。

二、使用GetX

在flutter创建后会有一个计数的示例。这里使用GetxController，Controller中定义变量都是可被观察的。

ZCounterController代码如下

class ZCounterController extends GetxController {RxInt timestamp = 0.obs;void getTimestamp() {print("getTimestamp");int cur = DateTime.now().millisecondsSinceEpoch;timestamp.value = cur;}
}

当点击按钮时候，重新获取时间戳，更改timestamp.value的值。

在使用的地方，我们需要实现

final ZCounterController c = Get.put(ZCounterController());

展示用到Obx函数

 Obx(() => Text("获取的timestamp: ${c.timestamp}",style: TextStyle(fontSize: 12, color: Colors.white),)),

点击按钮调用c.getTimestamp();

效果图如下

使用完整代码如下

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:get/get.dart';class ZGetXPage extends StatefulWidget {const ZGetXPage({super.key});@overrideState<ZGetXPage> createState() => _ZGetXPageState();
}class _ZGetXPageState extends State<ZGetXPage> {@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}@overrideWidget build(BuildContext context) {// Instantiate your class using Get.put() to make it available for all "child" routes there.final ZCounterController c = Get.put(ZCounterController());return Scaffold(appBar: AppBar(title: const Text('测试GetX'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(height: 136,width: 200,color: Colors.blue,alignment: Alignment.center,child: Obx(() => Text("获取的timestamp: ${c.timestamp}",style: TextStyle(fontSize: 12, color: Colors.white),)),),SizedBox(height: 20,),TextButton(onPressed: () {c.getTimestamp();},child: Container(height: 36,width: 100,color: Colors.lightGreen,alignment: Alignment.center,child: Text('点击获取',style: TextStyle(fontSize: 12, color: Colors.white),),),),],)),);}
}class ZCounterController extends GetxController {RxInt timestamp = 0.obs;void getTimestamp() {print("getTimestamp");int cur = DateTime.now().millisecondsSinceEpoch;timestamp.value = cur;}
}

三、小结

flutter开发实战-GetX响应式状态管理使用

学习记录，每天不停进步。