6.12 GetX
// 安装
get: ^4.6.5
// 引入
import 'package:get/get.dart';
// 改写入口
MaterialApp => GetMaterialApp
GetX 与其说是一个状态管理库，倒不如是是一个简化 Flutter 开发的百宝箱。它提供了很多工具来简化我们的开发，本篇我们先对 GetX 有一个大概的认识，然后接下来的篇章再将 GetX 的具体应用。
6.12.1 dialog
Get.defaultDialog(
title: "标题",
middleText: "我是内容",
confirm: ElevatedButton(
onPressed: () {
print("确认");
},
child: const Text("确定")),
cancel: ElevatedButton(
onPressed: () {
print("取消");
},
child: const Text("取消")));
6.12.2 SnackBar
Flutter 自身携带的 SnackBar 有很多限制，而 GetX 的非常简单，当然也有更多的样式配置和位置配置参数。
Get.snackbar('SnackBar', '这是GetX的SnackBar');
6.12.3 BottomSheets
BottomSheet 是底部弹出的一个组件，常用于单选、验证码二次校验弹窗等，GetX的BottomSheet底部弹出是自定义通过路由push的方法实现底部弹窗的一个效果。
import 'package:get/get.dart';
class BottomSheetExample extends StatelessWidget {
GlobalKey<NavigatorState> _navKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetX Title"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(onPressed: () {
Get.bottomSheet(
Container(
child: Wrap(
children: [
ListTile(
leading: Icon(Icons.wb_sunny_outlined),
title: Text("白天模式"),
onTap: () {
// 切换主题
Get.changeTheme(ThemeData.light());
},
),
ListTile(
leading: Icon(Icons.wb_sunny),
title: Text("黑夜模式"),
onTap: () {
// 切换主题
Get.changeTheme(ThemeData.dark());
},
)
],
),
)
);
}, child: Text("Bottom Sheet"))
],
),
),
);
}
}
6.12.4 路由
路由支持命名路由和匿名路由：
Get.to(() => Home());
Get.toNamed('/home');
// 返回上一个页面
Get.back();
// 使用下一个页面替换（没有返回按钮）
Get.off(NextScreen());
// 清空导航堆栈全部页面
Get.offAll(NextScreen());
// 获取命名路由参数
print(Get.arguments['id']);
print(Get.arguments['name']);
需求：页面跳转APage -> BPage -> CPage -> DPage，需要从DPage返回到BPage
原生写法：
Navigator.popUntil(context,
(route) => route.settings.name == '/BPage'
);
使用GetX更简单(不需要context)：
Get.until((route) => route.settings.name == '/BPage');
注意：
网上很多帖子使用的是Get.offUntil，其实是不太准确的。
Get.until和（Get.offUntil、Get.offNamedUntil）的区别：
-
Get.until是从当前页面一层一层地返回，当到达BPage时停止。 -
Get.offUntil是销毁页面并进入新的页面，与原生方法Navigation.pushAndRemoveUntil的用法相同，这里的BPage和之前的BPage已经不是同一个了。
作者：李有钱灬
链接：https://www.jianshu.com/p/10dbede58590
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
import 'package:flutter/material.dart';
import './tools/routers.dart';
import 'package:get/get.dart';
import '../pages/Tabs.dart';
import '../pages/search.dart';
import '../pages/first.dart';
import '../pages/banner.dart';
import '../pages/bannerBuilder.dart';
import '../pages/animationPage.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "Flutter Demo",
theme: ThemeData(primarySwatch: Colors.blue),
// home: const Tabs(),
initialRoute: "/",
// onGenerateRoute: onGenerateRoute,
// 默认路由跳转动画(全局)
defaultTransition: Transition.rightToLeftWithFade,
getPages: [
GetPage(name: "/", page: () => const Tabs()),
GetPage(
name: "/s", page: ({arguments}) => Search(arguments: arguments)),
GetPage(
name: "/f",
page: () => const FirstPage(),
// 也可以针对某一个路由配置
transition: Transition.fade),
GetPage(name: "/b", page: () => const BannerPage()),
GetPage(name: "/bb", page: () => const BannerBuilder()),
GetPage(name: "/ap", page: () => const AnimationPage()),
],
);
}
}
中间件 middleware
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class SearchMiddleWare extends GetMiddleware {
@override
RouteSettings? redirect(String? route) {
// return super.redirect(route);
// ... doSomeThing
// 例如没有登录，跳转到登录
return RouteSettings(name: "/");
}
}
// 配置中间件
GetPage(name: "/b", page: () => const BannerPage(),middlewares: [SearchMiddleWare()])
6.12.5 页面返回刷新
方法一：
// 第一个界面
///刷新方法页面刷新
void resData() async {
datas.clear(); //清除原有列表
getData(); //请求数据
}
///需要跳转到地方
Get.to(() => twoPage()).then((value) {
if (value != null && value) {
resData();
}
});
// 第二个界面
//在你需要返回的地方
Get.back(result: true);
方法二：分层管理，view，controller分开
controller层
//定义刷新方法
class AAAAController extend GetxController{
refreshData(){
xxxxxx；
}
}
view层
APage ----> BPage，a页面到了b页面，进行操作之后，需要返回a页面并刷新。
B页面View
//操作之后，需要返回A页面。
//比如提交之后，返回刷新一下
submitData(){
//提交操作
xxxxxx();
//返回,并刷新。
back();
}
back(){
final AAAAController logic = Get.find<AAAAController>();
logic.refreshData(); //找到控制器，并使用刷新操作的方法。
Get.back();
}
6.12.6 加载流程
使用get中的代码分层，GetxController
1、dart界面中，先加载界面，bo还没有初始化
2、GetxController 中调用 onReady
3、GetxController 中执行 update(["recharge"]);
4、dart刷新界面，GetBuilder 中的代码
网友评论