Flutter学习-GetX-07 中间件

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

本文主要介绍下中间件-getPage的使用,以及它的一些方法介绍

中间件顾名思义就是我们路由中一些中间路由，比如登录页面或者注册页面完成后后续就不在打开了，除非特定入口。Getx怎么处理中间件？

1. 创建中间件

可以通过Get事件来触发动作，可以通过使用routingCallback来实现

GetMaterialApp(
  routingCallback: (routing) {
if(routing?.current == '/login'){
  Get.rawSnackbar(title: '登录', message:'登录失效，重新登录');
}
}
)

做出一些处理，比如提示或者说发送信息给后台

如果你没有使用GetMaterialApp，你可以使用手动API来附加Middleware观察器。

void main() {
  runApp(
    MaterialApp(
      onGenerateRoute: Router.generateRoute,
      initialRoute: "/",
      navigatorKey: Get.key,
      navigatorObservers: [
        GetObserver(MiddleWare.observer), // 这里添加观察器 !!!
      ],
    ),
  );
}

创建一个MiddleWare类

class MiddleWare {
  static observer(Routing routing) {
    ///你除了可以监听路由外，还可以监听每个页面上、Dialogs和Bottomsheets。
    if (routing.current == '/second' && !routing.isBottomSheet == ) {
      Get.snackbar("Hi", "You are on second route");
    } else if (routing.current =='/third'){
      print('last route called');
    }
  }
}

创建一个简单的页面进行跳转，使用Get进行监听

class First extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            Get.snackbar("hi", "i am a modern snackbar");
          },
        ),
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            Get.toNamed("/second");
          },
        ),
      ),
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.add),
          onPressed: () {
            Get.snackbar("hi", "i am a modern snackbar");
          },
        ),
        title: Text('second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            Get.toNamed("/third");
          },
        ),
      ),
    );
  }
}

class Third extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Third Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Get.back();
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

当我们跳转的时候会展示我们的提示

2. 中间件一些方法

我们可以到中间件的一些方法，我们可以重写这些方法实现我们的效果 GetPage现在有个新的参数可以把列表中的Get中间件按指定顺序执行。

当GetPage有中间件时，所有的子page会自动有相同的中间件。

• priority

final middlewares = [
  GetMiddleware(priority: 1),
  GetMiddleware(priority: 5),
  GetMiddleware(priority: 3),
  GetMiddleware(priority: -2),
];

这些中间件会按这个顺序执行 -2 => 1 => 3 => 5

• redirect

当被调用路由的页面被搜索时，这个函数将被调用。它将RouteSettings作为重定向的结果。或者给它null，就没有重定向了。

RouteSettings? redirect(String? route) {
  final authService = Get.find<AuthService>();
  return authService.authed.value ? null : RouteSettings(name: '/login')
}

• onPageCalled 在调用页面时，创建任何东西之前，这个函数会先被调用。 您可以使用它来更改页面的某些内容或给它一个新页面。

GetPage? onPageCalled(GetPage? page) {
  final authService = Get.find<AuthService>();
  return page?.copyWith(title: 'Welcome ${authService.UserName}');
}

• OnBindingsStart

这个函数将在绑定初始化之前被调用。 在这里，您可以更改此页面的绑定。

List<Bindings>? onBindingsStart(List<Bindings>? bindings) {
  final authService = Get.find<AuthService>();
  if (authService.isAdmin) {
    bindings?.add(AdminBinding());
  }
  return bindings;
}

• OnPageBuildStart

这个函数将在绑定初始化之后被调用。 在这里，您可以在创建绑定之后和创建页面widget之前执行一些操作。

GetPageBuilder? onPageBuildStart(GetPageBuilder? page) {
  print('bindings are ready');
  return page;
}

• OnPageBuilt

这个函数将在GetPage.page调用后被调用，并给出函数的结果，并获取将要显示的widget。

Widget onPageBuilt(Widget page) => page;

• OnPageDispose

这个函数将在处理完页面的所有相关对象(Controllers, views, ...)之后被调用。

void onPageDispose() {
 print('onPageDispose');
}

3. 小结

我们在GetPage中设置中间件middlewares，通过添加一些判断条件，比如我们登录钱包前或者一些要验证的页面放在中间件的判断中，或者统一入口处理。通过中间件的一些方法我们可以改变绑定或者修改页面的参数。