Flutter-GetX
Flutter
GetX-路由管理
GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理
安装
pubspec.yaml
...
dependencies:
flutter:
sdk: flutter
...
get: ^3.17.1 # Add
...
引入
import 'package:get/get.dart';
如果你想免上下文（context）使用路由/snackbars/dialogs/bottomsheets，GetX对你来说也是极好的
在你的MaterialApp前加上 "Get"，把它变成GetMaterialApp。
GetMaterialApp( // Before: MaterialApp(
home: MyHome(),
)
例子
普通路由导航
导航到新页面
Get.to(NextScreen());
要关闭snackbars, dialogs, bottomsheets或任何你通常会用Navigator.pop(context)关闭的东西。
Get.back();
进入下一个页面，但没有返回上一个页面的选项（用于闪屏页，登录页面等）。
Get.off(NextScreen());
进入下一个页面并取消之前的所有路由（在购物车、投票和测试中很有用）。
Get.offAll(NextScreen());
在另一个页面上，发送前一个路由的数据。
携带返回值返回
Get.back(result: 'success');
接受
CheetahButton('arguments命名路由', () async {
var result = await Get.toNamed(Routes.NAV_SIMPLE, arguments: '小叮当');
print('带参数命名路由返回：$result');
}),
这个arguments通过
final String argName = Get.arguments; // 接收
params命名路由
路由带参数 类似于前端get请求的params
CheetahButton(
'params命名路由',
() => Get.toNamed('${Routes.NAV_SIMPLE}?name=Taoya&age=22'),
),
接收
class NavSimplePage extends StatelessWidget {
final String name = Get.parameters['name'];
final String age = Get.parameters['age'];
......
}
path命名路由
类似于前端的位置参数
比如
/book/1
/book/2
...
定义
GetPage(
name: "${Routes.NAV_SIMPLE}/:name",
page: () => NavSimplePage(),
),
...
...
CheetahButton(
'path命名路由',
() => Get.toNamed('${Routes.NAV_SIMPLE}/taoya'),
),
使用
/// 进入新页面打印参数
print(Get.parameters); // I/flutter ( 4292): {name: taoya}
replace路由
浏览并删除前一个页面。
定义
CheetahButton('replace路由', () {
Get.offNamed(Routes.NAV_SIMPLE);
}),
原生Flutter路由
只要把 Navigator（大写）改成 navigator（小写），你就可以拥有标准导航的所有功能，而不需要使用context
例如：
// 默认的Flutter导航
Navigator.of(context).push(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return HomePage();
},
),
);
// 使用Flutter语法获得，而不需要context。
navigator.push(
MaterialPageRoute(
builder: (_) {
return HomePage();
},
),
);
// get语法 (这要好得多)
Get.to(HomePage());
别名路由导航
导航到下一个页面
Get.toNamed("/NextScreen");
浏览并删除前一个页面。
Get.offNamed("/NextScreen");
浏览并删除所有以前的页面。
Get.offAllNamed("/NextScreen");
要定义路由，使用GetMaterialApp。
void main() {
runApp(
GetMaterialApp(
initialRoute: '/',
getPages: [
GetPage(name: '/', page: () => MyHomePage()),
GetPage(name: '/second', page: () => Second()),
GetPage(
name: '/third',
page: () => Third(),
transition: Transition.zoom
),
],
)
);
}
这样优点臃肿. 创建一个文件
app_pages.dart
// 页面
import 'package:demo_getx/modules/home/home_page.dart';
import 'package:demo_getx/modules/nav/nav_page.dart';
import 'package:demo_getx/modules/nav/simple_page.dart';
// 插件
import 'package:get/get.dart';
// 自定义路由表
part './app_routes.dart';
abstract class AppPages {
static final pages = [
GetPage(
name: Routes.HOME,
page: () => HomePage(),
),
GetPage(
name: Routes.NAV,
page: () => NavPage(),
),
GetPage(
name: Routes.NAV_SIMPLE,
page: () => NavSimplePage(),
),
GetPage(
name: "${Routes.NAV_SIMPLE}/:name",
page: () => NavSimplePage(),
),
];
}
定义路由表
routes/app_routers.dart
abstract class Routes {
static const INITIAL = '/'; // 初始化
static const HOME = '/home'; // 首页
static const NAV = '/nav'; // 导航
// ...
}
使用
onTap: () {
print("点击了路由'");
Get.toNamed(Routes.NAV);
}
定制404页面
处理未找到的路由
可以在GetMaterialApp中定义unknownRoute页面。
void main() {
runApp(
GetMaterialApp(
unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),
initialRoute: '/',
getPages: [
GetPage(name: '/', page: () => MyHomePage()),
GetPage(name: '/second', page: () => Second()),
],
)
);
}
免context导航
用Flutter创建一个简单的SnackBar，你必须获得Scaffold的context，或者你必须使用一个GlobalKey附加到你的Scaffold上。
final snackBar = SnackBar(
content: Text('Hi!'),
action: SnackBarAction(
label: 'I am a old and ugly snackbar :(',
onPressed: (){}
),
);
// 在小组件树中找到脚手架并使用它显示一个SnackBars。
Scaffold.of(context).showSnackBar(snackBar);
使用GetX
Get.snackbar('Hi', 'i am a modern snackbar');
更多参数
Get.snackbar(
"Hey i'm a Get SnackBar!", // title
"It's unbelievable! I'm using SnackBar without context, without boilerplate, without Scaffold, it is something truly amazing!", // message
icon: Icon(Icons.alarm),
shouldIconPulse: true,
onTap:(){},
barBlur: 20,
isDismissible: true,
duration: Duration(seconds: 3),
);
////////// ALL FEATURES //////////
// Color colorText,
// Duration duration,
// SnackPosition snackPosition,
// Widget titleText,
// Widget messageText,
// bool instantInit,
// Widget icon,
// bool shouldIconPulse,
// double maxWidth,
// EdgeInsets margin,
// EdgeInsets padding,
// double borderRadius,
// Color borderColor,
// double borderWidth,
// Color backgroundColor,
// Color leftBarIndicatorColor,
// List<BoxShadow> boxShadows,
// Gradient backgroundGradient,
// FlatButton mainButton,
// OnTap onTap,
// bool isDismissible,
// bool showProgressIndicator,
// AnimationController progressIndicatorController,
// Color progressIndicatorBackgroundColor,
// Animation<Color> progressIndicatorValueColor,
// SnackStyle snackStyle,
// Curve forwardAnimationCurve,
// Curve reverseAnimationCurve,
// Duration animationDuration,
// double barBlur,
// double overlayBlur,
// Color overlayColor,
// Form userInputForm
///////////////////////////////////
