首页 > 其他分享 >Flutter 利用路由监听页面的展示与否

Flutter 利用路由监听页面的展示与否

时间:2023-11-27 17:13:09浏览次数:30  
标签:void 监听 routeObserver AppRouteObserver override Flutter 路由 页面

1、新建routeObser.dart文件:

import 'package:flutter/material.dart';

class AppRouteObserver {
  //这是实际上的路由监听器
  static final RouteObserver<ModalRoute<void>> _routeObserver =
      RouteObserver<ModalRoute<void>>();
  //这是个单例
  static final AppRouteObserver _appRouteObserver =
      AppRouteObserver._internal();

  AppRouteObserver._internal();
  //通过单例的get方法轻松获取路由监听器
  RouteObserver<ModalRoute<void>> get routeObserver {
    return _routeObserver;
  }

  factory AppRouteObserver() {
    return _appRouteObserver;
  }
}

2、修改main.dart如下:

...
MaterialApp(
      ...,
      navigatorObservers: [AppRouteObserver().routeObserver],
);
...

3、监听页面显隐的页面

class _XXX extends State<XXX> with RouteAware {
...
  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();

    /// 路由订阅
    AppRouteObserver().routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    /// 取消路由订阅
    AppRouteObserver().routeObserver.unsubscribe(this);
    super.dispose();
  }

  /// 当前的页面被push显示到用户面前 viewWillAppear.
  @override
  void didPush() {
    print('显示');
  }

  /// 当前的页面被pop
  @override
  void didPop() {
    print('didPop');
  }

  /// 上面的页面被pop后当前页面被显示时
  @override
  void didPopNext() {
    print('didPopNext');
  }

  /// 从当前页面push到另一个页面
  @override
  void didPushNext() {
    print('隐藏');
  }
  ...
}

 

标签:void,监听,routeObserver,AppRouteObserver,override,Flutter,路由,页面
From: https://www.cnblogs.com/atao24/p/17859817.html

相关文章

  • vue中的watch监听器
    方法一:当监听某一属性的变化时,建议直接使用函数写法constvm=newVue({el:'#app',data:{username:''},watch:{username(newVal,oldVal){console.log(newVal,oldVal)}}}) 方法二:当页面初始化需要监听一......
  • 399元!华为首款Wi-Fi 7路由器今日预售:最高3600Mbps
    今天,华为正式官宣了其首款Wi-Fi7路由器——华为路由BE3Pro,1000M网口版售价399元,11月27日下午18:00开启预售,正式开售时间为12月8日10:00。据介绍,华为路由BE3Pro搭载了四核Wi-Fi7技术,最高速率3600Mbps,还支持芯片级协同的灵犀双Wi-Fi,可以为华为设备智能提速。华为路由BE3Pro在......
  • Vue中自定义组件监听事件传参
    自定义数字框组件如下<template><divclass="count-box"><button@click="handleSub"class="minus">-</button><input:value="value"@change="handleChange"class="inp"typ......
  • FlashDuty Changelog 2023-10-30 | 告警路由与 Slack 应用
    FlashDuty:一站式告警响应平台,前往此地址免费体验!告警路由什么是告警路由?FlashDuty已经与Zabbix、Prometheus等监控系统实现无缝集成,通过一个简单的webhook就可以把告警系统产生的所有告警事件推送到FlashDuty来管理。每个告警事件的重要性、紧急程度和所属团队可能不同,我们期望可以......
  • arch4edu搞崩了我的flutter
    title:arch4edu搞崩了我的flutterbanner_img:https://cdn.studyinglover.com/pic/2023/08/588d9420c9302f5e0d6c2e89fbddf200.pngdate:2023-8-1921:36:00arch4edu搞崩了我的flutter今天是快乐的一天,适合滚包yay一切安好,arch4edu说我的flutter需要更新==>要排除的包:......
  • Flutter的动画开发入门简介
    Flutter动画库中的核心类,插入用于指导动画的值。Animation对象知道动画目前的状态(例如,是否开始,暂停,前进或倒退),但是对屏幕上显示的内容一无所知。AnimationController管理Animation。CurvedAnimation定义进程为非线性曲线。Tween为动画对象插入一个范围值。例如,Tween可......
  • 【前端VUE】Vue3路由设置(Typescript版本)
    新建项目npmcreatevite@latest安装vue-routercd.\my-web\npminstallvue-router在src->components下新增(Home.vue)<template><h1>我是主页</h1></template>在src->components下新增(Register.vue)<template><h1>用户......
  • createWebHistory路由和createWebHashHistory路由
    一、createWebHistory和createWebHashHistory的区别vue中常用的两种路由模式:hash路由模式和history路由模式。hash路由模式URL示例:http://example.com/#/path使用URL中的哈希(#)部分来模拟路由。哈希部分的改变不会触发页面刷新,因此称为前端路由。在单页应用中,前端路由器会监听UR......
  • 前端框架vue路由hash模式与history模式的区别
    hash模式会在页面初始化的时候,url后面会带上/#的hash值,后面是路由组件加携带参数,缺点是看起来不太美观,但相比于history模式来说,它具有用户在页面各种点击操作后,点击刷新后数据不丢失,也不会出现网络报错。而history模式优点是能让整个url看起来比较简洁美观,但问题就是项目部署上线......
  • 【Django基础】urls路由
    简单示例fromdjango.urlsimportpathfrom.importviewsurlpatterns=[path('articles/2003/',views.special_case_2003),path('articles/<int:year>/',views.year_archive),path('articles/<int:year>/<int:m......