一、什么是 GetX
GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。
GetX有三个基本原则：
1、 性能：GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。
2、效率：GetX语法简洁，保持了极高的性能，能极大地缩短开发时长。
3、结构：GetX可以将界面、路由、逻辑和依赖完全解耦，用起来更加清晰，代码更容易维护。
二、GetX响应式状态管理器
响应式是一种面向数据流和变化传播的编程范式。GetX处理响应式编程使它变得很简单，使用 Get 的响应式编程就像使用 setState 一样简单。
- 你不需要创建StreamControllers.
- 你不需要为每个变量创建一个StreamBuilder。
- 你不需要为每个状态创建一个类。
- 你不需要为一个初始值创建一个get。
三、Navigation路由跳转
GetX 进行路由跳转非常的简单，只需要调用Get.to()即可进行路由跳转，GetX为我们封装了Navigation，无需context可进行跳转，并且能很方便的使用跳转动画等。
GetX有两种跳转方式：
1、Navigation—通过to方法进行路由跳转Get.to()
第一步：程序入口设置，要用GetMaterialApp
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/NavigationForNamedExample/NavigationForNamedExample.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX",
home: NavigationForNamedExample(),//就是我自己的页面呀
);
}
}
第二步：调用to方法
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/NavigationExample/home.dart';
import 'package:get/get.dart';
class NavigationExample extends StatelessWidget {
GlobalKey<NavigatorState> _navKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetX Navigation"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () async {
Get.to(Home());
},
child: Text("跳转到首页"))
],
),
),
);
}
}
2、Get.toName()
我们一般会使用第二种方法，getPages中的内容专门写一个类，用来初始所有的路由。
第一步：应用程序入口设置
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/NavigationForNamedExample/NavigationForNamedExample.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX",
initialRoute: "/",
defaultTransition: Transition.zoom,
getPages: [
GetPage(name: "/", page: () => MyApp()),
GetPage(name: "/home", page: () => Home()),
GetPage(name: "/my", page: () => My(), transition: Transition.rightToLeft)
],
home: NavigationForNamedExample(),
);
}
}
第二步：调用toNamed
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class NavigationForNamedExample extends StatelessWidget {
GlobalKey<NavigatorState> _navKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetX NavigationForNamed"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () async {
Get.toNamed("/my");
},
child: Text("跳转到首页"))
],
),
),
);
}
}
优化路由：
1、路由名称管理类
abstract class Routes {
static const splash = '/splash';
static const home = '/home'; // 首页
static const login = '/login'; // 登陆
static const userReg = '/register'; //会员注册路由
static const agentReg = '/agentRegister'; //代理注册路由
static const forgetPwd = '/forgetPwd'; //忘记密码路由
static const activity = '/activity';
static const gameInit = '/gameInit'; //游戏加载路由
static const gameCategory = '/gameCategory'; //电子、棋牌游戏展示路由
static const article = '/article'; //文章路由
static const gameWebView = '/gameWebView'; // 进入第三方游戏页面
static const welfareCenter = '/welfare'; // 进入福利界面
static const popularize = '/popularize'; // 进入推广界面
static const maintain = '/maintain'; // 维护界面
}
2、Get初始化路由数组
List<GetPage> routers = [
GetPage(
name: Routes.splash,
page: () => const SplashPage(),
),
GetPage(
name: Routes.home,
page: () => const HomePage(),
binding: HomeBinding(),
),
GetPage(
name: Routes.maintain,
page: () => const MaintainPage(),
),
//首页路由
GetPage(
name: Routes.login,
page: () => const LoginPage(),
binding: LoginBinding()),
//登陆路由
GetPage(
name: Routes.userReg,
page: () => const RegisterPage(),
// binding: LoginBinding()
),
]
binding对构造器进行统一的初始化，使用的时候不需要我们再次初始化。
Flutter GetX系列教程---国际化配置、依赖注入、Binding
3、调用
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final _app = AppService.to;
Intl.defaultLocale = 'zh';
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter App',
theme: CustomTheme.darkTheme,
darkTheme: CustomTheme.darkTheme,
themeMode: ThemeMode.dark,
initialRoute: Routes.splash,
getPages: routers, //这里就是所有的路由数组
defaultTransition: Transition.noTransition,
transitionDuration: const Duration(milliseconds: 325),
routingCallback: _app.routingCallBack,
localizationsDelegates: const [
FormBuilderLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
onInit: () {
Get.put(MusicController());
},
navigatorObservers: [
FlutterSmartDialog.observer,
SentryNavigatorObserver(),
],
builder: (context, widget) {
return MediaQuery(
data: MediaQuery.of(context).copyWith(
textScaleFactor: 1.0,
),
child: FlutterSmartDialog(
child: widget,
),
);
},
);
}
}
接收上个页面传参：Get.parameters
class NextController extends StatelessWidget{
GlobalKey<NavigatorState> _navKey = GlobalKey();
Map argMap = Get.parameters;
var pra = "zhangsanlisi";
@override
Widget build(BuildContext context) {
print(argMap['name']);
return Scaffold(
appBar: AppBar(
title: Text("下个页面"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Text(argMap["name"]),
ElevatedButton(
onPressed: () async {
Get.back(result: pra);//数据回传
},
child: Text("跳转到首页"))
],
),
),
);
}
}
四、Snackbar
如果想在应用程序中触发某些特定的事件后，需要弹出一则快捷消息，那么使用Snackbar则是最佳的选择，接下来我们看一下GetX如何来联调Snackbar来使用。
image.png
Snackbar总共38个属性：
image.png
image.png
五、Dialog
Dialog 底层其实是对AlertDialog进行了封装， 一般用于二次确认的弹出框，比如当点击某个按钮提交资料时，需要用户二次确认，以防止误操作。
按钮内容：
ElevatedButton(onPressed: (){
Get.defaultDialog(
title:"开车啦",
titleStyle:TextStyle(color: Colors.red,fontSize: 20),
middleText: "上车一块，老人免票",
middleTextStyle: TextStyle(color: Colors.red,fontSize: 14),
contentPadding: EdgeInsets.all(10),
radius: 20,
//两种方法：
/* 方法一：
textCancel: "取消",//系统
textConfirm: "确定",
onCancel: (){
print("点击了取消");
},
onConfirm: (){
Get.back();
print("点击了确定");
}
*/
//自定义按钮
// confirm: TextButton(onPressed: (){print("点击了确定");}, child: Text("确定")),
// cancel: TextButton(onPressed: (){print("点击了取消");}, child: Text("取消")),
//方法二：
actions: [
ElevatedButton(onPressed: (){
Get.back();
Get.toNamed('/nextController',parameters: {'name':'zhang'});
print("点击了取消");
}, child: Text("取消")),
SizedBox(width: 20,),
ElevatedButton(onPressed: (){Get.back();print("点击了确定");}, child: Text("确定"))
]
);
} , child: Text("点击Dialog")),
image.png
Dialog属性和说明：
image.png
网友评论