Getx在flutter中管理路由组

2021-11-30 20:24:28 浏览数 (1)

路由

普通路由导航

打开到新的页面:

代码语言:javascript复制
Get.to(NextScreen());

对应原生路由:

代码语言:javascript复制
Navigator.push(context, MaterialPageRoute<void>(
  builder: (BuildContext context) {
    return NextScreen();
  },
));

返回:

代码语言:javascript复制
Get.back();

对应原生路由:

代码语言:javascript复制
Navigator.pop(context);

打开新页面,并且用新页面替换旧页面(删除旧页面):

代码语言:javascript复制
Get.off(NextScreen());

对应原生路由:

代码语言:javascript复制
 Navigator.pushReplacement(context, MaterialPageRoute<void>(
      builder: (BuildContext context) {
        return NextScreen();
      },
    ));

打开新页面并删除之前的所有路由:

代码语言:javascript复制
Get.offAll(NextScreen());

对应原生路由:

代码语言:javascript复制
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute<void>(
    builder: (BuildContext context) {
      return NextScreen();
    },
  ),
  (Route<dynamic> route) => false,
);

导航到新页面,在返回时接收返回数据:

代码语言:javascript复制
var data = await Get.to(NextScreen());

对应原生路由:

代码语言:javascript复制
var data = await  Navigator.push(context, MaterialPageRoute<void>(
  builder: (BuildContext context) {
    return NextScreen();
  },
));

带返回值返回前一个路由,配合上面使用:

代码语言:javascript复制
Get.back(result: 'success');

对应原生路由:

代码语言:javascript复制
 Navigator.pop(context, 'success');

别名路由导航

  1. 声明别名:
代码语言:javascript复制
abstract class Routes {
  static const Initial = '/';
  static const NextScreen = '/NextScreen';

}
  1. 注册路由表:
代码语言:javascript复制
abstract class AppPages {
  static final pages = [
    GetPage(
      name: Routes.Initial,
      page: () => HomePage(),
    ),
    GetPage(
      name: Routes.NextScreen,
      page: () => NextScreen(),
    ),
  ];
}
  1. 替换MaterialApp为GetMaterialApp:
代码语言:javascript复制
void main() {
  runApp(GetMaterialApp(
    debugShowCheckedModeBanner: false,
    initialRoute: Routes.INITIAL,
    theme: appThemeData,
    defaultTransition: Transition.fade,
    getPages: AppPages.pages,
    home: HomePage(),
  ));
}
使用

导航到下一个页面:

代码语言:javascript复制
Get.toNamed(Routes.NextScreen);

导航到下一个页面并删除前一个页面:

代码语言:javascript复制
Get.offNamed(Routes.NextScreen);

导航到下一个页面并删除以前所有的页面:

代码语言:javascript复制
Get.offAllNamed(Routes.NextScreen);
发送数据到别名路由:

Get在这里接受任何东西,无论是一个字符串,一个Map,一个List,甚至一个类的实例。

代码语言:javascript复制
Get.toNamed(Routes.NextScreen, arguments: '新垣结衣');
获取参数:
代码语言:javascript复制
String name=Get.arguments;
动态网页链接:

像web一样携带参数,适合前端开发的风格。

代码语言:javascript复制
Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

获取参数:

代码语言:javascript复制
int id = Get.parameters['id'];// out: 354String name=Get.parameters['name'];

还可以这样定义路由别名:

代码语言:javascript复制
GetPage(name: '/profile/:user',page: () => UserProfile(),),

导航:

代码语言:javascript复制
Get.toNamed("/profile/34954");

在第二个页面上,通过参数获取数据

代码语言:javascript复制
print(Get.parameters['user']);// out: 34954

中间件

在跳转前做些事情,比如判断是否登录,可以使用routingCallback来实现:

代码语言:javascript复制
GetMaterialApp(  routingCallback: (routing) {    if(routing.current == '/second'){     // 如果登录。。。    }  })
GetMiddleware

有些页面需要登录验证,有些不需要,这时候可以不使用 routingCallback,单独写一个验证的GetMiddleware

代码语言:javascript复制
class AuthMiddleware extends GetMiddleware {  @override  int? priority = 2;  bool isAuthenticated = false;  @override  RouteSettings? redirect(String? route) {    debugPrint('=======AuthMiddleware.redirect:$route');    if (!isAuthenticated) {      return RouteSettings(name: Routes.LOGIN);    }    return super.redirect(route);  }  @override  GetPage? onPageCalled(GetPage? page) {    debugPrint('=======AuthMiddleware.onPageCalled:$page');    return super.onPageCalled(page);  }}

然后在 GetPage里使用:

代码语言:javascript复制
  GetPage(      name: Routes.MIDDLEWARE_PAGE,      page: () => MiddlewarePagePage(),      binding: MiddlewarePageBinding(),      middlewares: [AuthMiddleware()],    ),

这样跳转的时候如果没有登录,就重定向到Routes.LOGIN这个路由。

小部件导航

SnackBars

弹出:

代码语言:javascript复制
Get.snackbar('Hi', 'i am a modern snackbar');

对应原生写法:

代码语言:javascript复制
final snackBar = SnackBar(  content: Text('Hi!'),  action: SnackBarAction(    label: 'I am a old and ugly snackbar',    onPressed: (){}  ),);//用Flutter创建一个简单的SnackBar,你必须获得Scaffold的context,或者你必须使用一个GlobalKey附加到你的Scaffold上。Scaffold.of(context).showSnackBar(snackBar);
Dialogs

打开一个默认的Dialog:

代码语言:javascript复制
Get.defaultDialog(  onConfirm: () => print("Ok"),  middleText: "Dialog made in 3 lines of code");

打开自定义的Dialog:

代码语言:javascript复制
Get.dialog(YourDialogWidget());
BottomSheets

Get.bottomSheet类似于showModalBottomSheet,但不需要context:

代码语言:javascript复制
Get.bottomSheet(  Container(    child: Wrap(      children: <Widget>[        ListTile(          leading: Icon(Icons.music_note),          title: Text('Music'),          onTap: () => {}        ),        ListTile(          leading: Icon(Icons.videocam),          title: Text('Video'),          onTap: () => {},        ),      ],    ),  ));

0 人点赞