【flutter ValueNotifier实现路由跳转时让某个界面刷新数据】

场景路由栈:A → B → C(B 跳 C 用了 pushReplacement,路由栈变成 A → C)

普通做法使用C中返回:传值 Navigator.pop(true); 
A界面中
final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => BPage()),
    );
    // 如果C页面pop回传了true,就刷新接口
    if (result == true) {
      _fetchData(); // 刷新接口方法
    }
   由于B已经从路由栈中移除,所以A根本接收不到C的返回值,无法正常刷新

不用event_bus或其他状态管理,用flutter

import 'package:flutter/material.dart';
/*
* 封装值通知器,用来通知页面刷新
* */
// 全局  某个详情页面刷新监听
final GlobalRefresh instantDetailRefresh = GlobalRefresh();
// B页面刷新监听
final GlobalRefresh BPageRefresh = GlobalRefresh();
// C页面刷新监听
final GlobalRefresh CPageRefresh = GlobalRefresh();


class GlobalRefresh {
  final ValueNotifier<bool> notify = ValueNotifier(false);

  // 监听(返回监听对象,方便页面取消)
  VoidCallback listen(VoidCallback onRefresh) {
    void callback() {
      if (notify.value) {
        onRefresh();
        reset();
      }
    }
    notify.addListener(callback);
    return callback; // 关键:返回这个方法,用于取消监听
  }

  // 触发刷新
  void call() {
    notify.value = true;
  }

  // 重置
  void reset() {
    notify.value = false;
  }

  dispose() {
    notify.dispose();
  }
}

使用:

instantDetail界面中

VoidCallback? _refreshListener;

  void initState() {
    // TODO: implement initState
    super.initState();
    _refreshListener = instantDetailRefresh.listen((){
      _httpArticleDetail();
    });
}


  void dispose() {
  if (_refreshListener != null) {
      instantDetailRefresh.notify.removeListener(_refreshListener!);
    }
    super.dispose();
  }

某个需要通知instantDetail刷新的界面中调用:
GestureDetector(
      onTap: (){
        Navigator.of(context).pop();
          instantDetailRefresh.call();
        }
      },)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值