Flutter 页面切换监听与下拉刷新

很多业务场景都需要监听页面切换的操作，比如从 A 页面跳转到 B ，再从 B 返回 A 之后，需要重新刷新下数据。在 Android 里通常是 Activity，iOS 里通常是 ViewController 类，这些都对应用户理解的一个页面，但是 Flutter 里并没有像我们通常理解的页面这个概念，所以初学者刚开始会挺别扭。
Flutter 是通过 Navigator 来组织页面的，有点像前端 React/Vue 里的路由。通常在一个 Flutter 应用中，只有一个 Activity/ViewController ，Flutter 呈现的页面的跳转返回，都只是通过 Navigator 将 Widget 抽象成一个一个用户理解的页面而已。所以 Flutter 页面切换监听，还是需要通过对路由的监听来实现。

1. 根组件里定义 RouteObserver

首先需要在根组件 MaterialApp 里定义一个全局的 RouteObserver 对象：

///定义全局的 routeObserver 对象
final RouteObserver<PageRoute> routeObserver = RouteObserver();

void main() {
  runApp();
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [routeObserver],
      ...
    );
  }
}

2. 在页面中订阅路由事件

接着需要在页面中，通过 RouteObserver 订阅路由事件。我们看下其方法签名：

//订阅
void subscribe(RouteAware routeAware, R route) 

//一般有订阅的同时，也会有解绑的函数，防止内存泄漏以及进行资源释放
void unsubscribe(RouteAware routeAware) 

RouteAware 是个什么鬼内，我们查看源码可以知道其是一个抽象类：

abstract class RouteAware {
  ///下一个页面退出返回时触发
  void didPopNext() { }

  ///当前页面进入时触发
  void didPush() { }

  ///当前页面退出时触发
  void didPop() { }

  ///当前页面跳转到下一个页面时触发
  void didPushNext() { }
}

可以看到，这里其实就是页面切换的监听回调了，如果我们需要实现文中开头所讲的业务场景，只需要使用 didPushNext()、didPopNext() 即可。还一个参数 R route 是个什么东西呢？RouteObserver 是个泛型类型，定了类型是 Route<dynamic>，其实就是当前页面所对应的路由对象。

最终，在页面 Widget 的 Stage 类中实现：

/// 一般通过 with 关键来实现，熟悉前端的可能知道 mixin 这个概念，当然你可以通过 implements 关键来实现接口
class _MyPageState extends State<MyPage> with RouteAware {

  //一般在这里进行订阅，不要试图在 initState() 函数中订阅，调用 ModalRoute.of(context) 会发生错误
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  void didPopNext() { }

  ///当前页面进入时触发
  void didPush() { }
  void didPop() { }
  void didPushNext() { }

}

下拉刷新

Flutter 中下拉刷新需要用到 RefreshIndicator 组件，一般在 ScrollView 或 ListView 外包一层 RefreshIndicator 组件即可。

1. 常见用法

  Future _onRefresh() async {
    //......实现刷新逻辑
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _onRefresh,        
      child: SingleChildScrollView(
        child: Container(),
      ));
  }

使用很简单，只需要实现 onRefresh 函数即可，这也是一个 Future 函数，当该 Future 执行完毕时，刷新操作也就完成了。是不是很奇怪，当我们用原生代码写下拉刷新时，通常需要定义一个状态来表示刷新状态，到 Flutter 这里居然啥都不用管。当触发下拉刷新时，就会执行 onRefresh 函数，只要该函数没有执行完毕，UI 上就一直显示的是刷新状态，一旦该函数执行完毕，UI 状态也会自动改变成刷新完成。

2. 怎么触发自动刷新

通常我们进入某个页面时，希望一进去就会触发自动下拉刷新，但是找了一圈发现没有什么属性可设置。经过一番研究，发现 RefreshIndicator 也是一个有状态组件，我们可直接获取该组件的状态，通过它的状态来手动触发下拉刷新。这就需要用到每个 Widget 都会有的 Key 属性了，通过 key 可以得到其对应的状态。具体代码如下：

  //自定义 RefreshIndicatorState 类型的 Key
  final GlobalKey<RefreshIndicatorState> _refreshKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    //必须在组件挂载运行的第一帧后执行，否则 _refreshKey 还没有与组件状态关联起来
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
      //关键代码，直接触发下拉刷新
      _refreshKey.currentState?.show();
    });
  }

  Future _onRefresh() async {
    //......实现刷新逻辑
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      key: _refreshKey,    //自定义 key，需要通过 key 获取到对应的 State
      onRefresh: _onRefresh,        
      child: SingleChildScrollView(
        child: Container(),
      ));
  }

3. 页面不能滚动时无法触发下拉刷新

如果页面内容很少，在一屏内不能滚动，你会发现无法触发下拉刷新。解决这个问题，需要设置 ScrollView 的 physics 属性。

最终完整解决方案如下：

  //自定义 RefreshIndicatorState 类型的 Key
  final GlobalKey<RefreshIndicatorState> _refreshKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    //必须在组件挂载运行的第一帧后执行，否则 _refreshKey 还没有与组件状态关联起来
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
      //关键代码，直接触发下拉刷新
      _refreshKey.currentState?.show();
    });
  }

  Future _onRefresh() async {
    //......实现刷新逻辑
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      key: _refreshKey,    //自定义 key，需要通过 key 获取到对应的 State
      onRefresh: _onRefresh,        
      child: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        child: Container(),
      ));
  }

默认情况下，当 ScrollView 包裹的内容太少时，是不会触发滚动事件的，这样也就不会触发下拉刷新。AlwaysScrollableScrollPhysics 则可以在这种情况下，触发滚动事件。

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

全套视频资料：

一、面试合集

二、源码解析合集

三、开源框架合集

欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓