GetX实践 2022-05-18 周三
2022-05-18 本文已影响0人
勇往直前888
简介
GetX是一个状态管理框架，可以替代Bloc，fish_redux，fluro等框架，性价比很高。
引入
pubspec.yaml中添加一行
get: ^4.6.3
第三方库指定版本号是个好习惯
主入口配置
-
GetMaterialApp替代大名鼎鼎的MaterialApp
-
main() -> runApp() -> GetMaterialApp() -> 首页 ....
-
引入GetX，只要一个语句就可以了
import 'package:get/get.dart';
import 'package:get/get.dart';
void main() {
runApp(GetMaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
);
}
}
这样写可以比通常的样例写法少一级
state，logic，view三层结构
一个页面，本来只需要一个有状态或者无状态widget。使用Getx之后，可以分为state，logic，view三个不同的文件，各司其职。
state
这个可以理解为状态管理，相当于MVC中的Model层，是专门用来管理数据的。
class CounterHighGetState {
RxInt count;
CounterHighGetState() {
count = 0.obs;
}
}
RxInt: 响应变量，基础类型将开头字母大写，然后加上Rx前缀。数值后面加上.obs，作为被观察的对象。实现观察者模式。
logic
逻辑层，相当于MVC中的Controller，处理业务逻辑
class CounterHighGetLogic extends GetxController {
final state = CounterHighGetState();
///自增
void increase() => ++state.count;
}
这里持有了一个state的成员变量。
view
视图层，相当于MVC中的View，进行显示。
这个和原来的widget基本上差不多。
class CounterHighGetPage extends StatelessWidget {
final CounterHighGetLogic logic = Get.put(CounterHighGetLogic());
final CounterHighGetState state = Get.find<CounterHighGetLogic>().state;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('计数器-响应式')),
body: Center(
child: Obx(
() => Text('点击了 ${state.count.value} 次',
style: TextStyle(fontSize: 30.0)),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => logic.increase(),
child: const Icon(Icons.add),
),
);
}
}
这里会有一个logic和一个state作为成员变量
Obx()和state中的.obs相对应，实现观察者模式
路由API
- 默认的flutter的写法
// 默认的Flutter导航
Navigator.of(context).push(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return HomePage();
},
),
);
- GetX的写法
// get语法
Get.to(HomePage());
从对比可以看出，用Getx来写路由，方便很多。
