【Flutter App】WillPopScope+getX+导航栏

1,102 阅读1分钟

今天在做app全局导航栏的时候发现Flutter中可以通过WillPopScope来实现返回按钮拦截 。onWillPop是一个WillPopScope的回调函数,当用户点击返回按钮时被调用。可以实现点击2次Back按钮退出App,App中多个Route(路由),Back按钮只退出指定页面等功能。

以下几种情况我们会用到WillPopScope:

  1. 需要询问用户是否退出。
  2. App中有多个Navigator,想要的是让其中一个 Navigator 退出,而不是直接让在 Widget tree 底层的 Navigator 退出。

controller:

image.png

这里在controller类中用obs监听了currentTab,会自动根据所选的tab来切换0-4五个页面对应的key,初始化五个tab对应的page。

View:

image.png

在HomeView里用Obx()来包裹导航栏的组件,每当导航栏的索引改变时,就刷新页面。