Flutter 实现dispose探测控件

文章目录

  • 前言
  • 一、什么是dispose探测控件?
    • 1、通常情况
    • 2、使用dispose探测控件
  • 二、如何实现
    • 1、继承StatefulWidget
    • 2、定义dipose回调
    • 3、定义child
    • 4、重载Dispose方法
    • 5、build child
  • 三、完整代码
  • 四、使用示例
    • 1、基本用法
    • 2、设置定义数据
  • 总结


前言

开发flutter一般会用状态管理工具,用了状态管理后大部分控件都会是StatelessWidget,StatefulWidget有dispose重载获取控件销毁时机,但StatelessWidget则没有,此时我们要获取控件销毁的时机就需要另寻他法了。


一、什么是dispose探测控件?

这是一个控件用于帮助探测无状态控件的销毁时机,有点类似visibility_detector用于探测控件的显示和隐藏。

1、通常情况

通常情况下想要知道一个页面是否销毁或切换了,需要通过StatefulWidget的dispose方法获取。代码如下:

class Page extends StatefulWidget {const Page({super.key,});_Page createState() => _Page();
}class _Page<T extends Widget, S> extends State<Page> {void dispose() {super.dispose();//此处获取到dispose时机}void didUpdateWidget(covariant Page oldWidget) {super.didUpdateWidget(oldWidget);//此处获取到控价刷新时机}Widget build(BuildContext context) {return const SizedBox();}
}

2、使用dispose探测控件

在使用使用状态管理的情况下,通常都是StatelessWidget页面,将其改成StatefulWidget,分成两个类显然是麻烦的。如果有了DisposeDetector(dispose探测控件),作为一个控件放入StatelessWidget页面中,就可以直接获取到dispose时机了。

class Page2 extends StatelessWidget {const Page2({super.key,});Widget build(BuildContext context) {return DisposeDetector(child: const SizedBox(),onDispose: () {//此处获取到dispose时机},onDidUpdateWidget: (DisposeDetector<SizedBox, dynamic> oldWidget) {//此处获取到控价刷新时机},);}
}

二、如何实现

1、继承StatefulWidget

在这里插入图片描述
在这里插入图片描述

2、定义dipose回调

在这里插入图片描述

3、定义child

在这里插入图片描述

4、重载Dispose方法

在这里插入图片描述

5、build child

在这里插入图片描述

三、完整代码

dispose_detector.dart

import 'package:flutter/material.dart';/// 创建人:  xin
/// 创建时间: 2023/6/15 13:44
/// 注释: 销毁探测控件
class DisposeDetector<T extends Widget, S> extends StatefulWidget {final Function onDispose;final Function(DisposeDetector<T, S> oldWidget) onDidUpdateWidget;final T child;final S? tag; //自定义数据const DisposeDetector({super.key, required this.child,required this.onDispose,required this.onDidUpdateWidget,this.tag,});_DisposeDetector<T, S> createState() => _DisposeDetector<T, S>();
}class _DisposeDetector<T extends Widget, S> extends State<DisposeDetector<T, S>>with TickerProviderStateMixin {void dispose() {super.dispose();widget.onDispose();}void didUpdateWidget(covariant DisposeDetector<T, S> oldWidget) {super.didUpdateWidget(oldWidget);widget.onDidUpdateWidget(oldWidget);}Widget build(BuildContext context) {return widget.child;}
}

四、使用示例

1、基本用法

class Page2 extends StatelessWidget {const Page2({super.key,});Widget build(BuildContext context) {return DisposeDetector(child: const SizedBox(),onDispose: () {//此处获取到dispose时机},onDidUpdateWidget: (DisposeDetector<SizedBox, dynamic> oldWidget) {//此处获取到控价刷新时机},);}
}

2、设置定义数据

class Page2Controller {void dispose() {//销毁逻辑}
}class Page2 extends StatelessWidget {final _ctrl = Page2Controller();Page2({super.key,});Widget build(BuildContext context) {return DisposeDetector(tag: _ctrl, //自定义数据,记录当前的controlleronDispose: () {//此处获取到dispose时机_ctrl.dispose();},onDidUpdateWidget:(DisposeDetector<SizedBox, Page2Controller> oldWidget) {//此处获取到控价刷新时机if (oldWidget.tag != _ctrl)//如果刷新控件时controller改变了,则销毁旧controller{oldWidget.tag!.dispose();}},child: const SizedBox(),);}
}

总结

以上就是今天要讲的内容,本文提供的控件是比较有用的,尤其是业务逻辑有数据释放的需求,比如播放器之类的,控件销毁后需要结束播放,将播放资源销毁,如果是用StatelessWidget则没办法实现,用StatefulWidget又会使得页面实现变得麻烦或者复杂,最好的方法则是使用本文提供的dispose探测控件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/346345.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《TCP/IP网络编程》(第十四章)多播与广播

当需要向多个用户发送多媒体信息时&#xff0c;如果使用TCP套接字&#xff0c;则需要维护与用户数量相等的套接字&#xff1b;如果使用之前学习的UDP&#xff0c;传输次数也需要和用户数量相同。 所以为了解决这些问题&#xff0c;可以采用多播和广播技术&#xff0c;这样只需要…

数据挖掘丨轻松应用RapidMiner机器学习内置数据分析案例模板详解(上篇)

RapidMiner 案例模板 RapidMiner 机器学习平台提供了一个可视化的操作界面&#xff0c;允许用户通过拖放的方式构建数据分析流程。 RapidMiner目前内置了 13 种案例模板&#xff0c;这些模板是预定义的数据分析流程&#xff0c;可以帮助用户快速启动和执行常见的数据分析任务。…

gdb 【Linux】

程序发布方式&#xff1a;  1、debug版本&#xff1a;程序会被加入调试信息&#xff0c;以便于进行调试。  2、release版本&#xff1a;不添加任何调试信息&#xff0c;是不可调试   确定一个可执行程序是debug&#xff0c;还是release [cxqiZ7xviiy0goapxtblgih6oZ test_g…

LabVIEW图像采集处理项目中相机选择与应用

在LabVIEW图像采集处理项目中&#xff0c;选择合适的相机是确保项目成功的关键。本文将详细探讨相机选择时需要关注的参数、黑白相机与彩色相机的区别及其适用场合&#xff0c;帮助工程师和开发者做出明智的选择。 相机选择时需要关注的参数 1. 分辨率 定义&#xff1a;分辨率…

Deepin安装PostGresql

最近要把开发环境完全从Windows移到Deepin上&#xff0c;本次介绍在Deepin借助apt-get安装和配置数据库。同时可以用Dbever提供图形化管理工具。 安装PostGreSQL数据库和创建数据库 #安装postgresql zhanglianzhuzhanglianzhu-PC:/$ sudo apt-get install postgresql-16 正在…

876. 链表的中间结点-链表

876. 链表的中间结点 - 力扣&#xff08;LeetCode&#xff09; 快慢指针 class Solution { public:ListNode* middleNode(ListNode* head) {ListNode* slow head;ListNode* fast head;while(fast ! nullptr && fast->next ! nullptr){slow slow->next;fast …

论文阅读:Indoor Scene Layout Estimation from a Single Image

项目地址&#xff1a;https://github.com/leVirve/lsun-room/tree/master 发表时间&#xff1a;2018 icpr 场景理解&#xff0c;在现实交互的众多方面中&#xff0c;因其在增强现实&#xff08;AR&#xff09;等应用中的相关性而得到广泛关注。场景理解可以分为几个子任务&…

【Web世界探险家】3. CSS美学(二)文本样式

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…

vue-cli是什么?和 webpack是什么关系?

前言 Vue CLI是Vue.js项目的官方脚手架&#xff0c;基于Node.js与Webpack构建。安装Vue CLI前需确保Node.js已安装&#xff0c;随后通过npm全局安装。Vue CLI能迅速创建和管理Vue.js项目&#xff0c;提升开发效率。而Webpack则负责资源打包&#xff0c;通过配置文件管理依赖、插…

【Bazel入门与精通】 rules之属性

https://bazel.build/extending/rules?hlzh-cn#attributes Attributes An attribute is a rule argument. Attributes can provide specific values to a target’s implementation, or they can refer to other targets, creating a graph of dependencies. Rule-specifi…

Java(十七)---ArrayList的使用

文章目录 前言1.ArrayList的简介2. ArrayList使用2.1.ArrayList的构造2.2.ArrayList的扩容机制(JDK17) 3.ArrayList的常见操作4. ArrayList的具体使用4.1.[杨辉三角](https://leetcode.cn/problems/pascals-triangle/description/)4.2.简单的洗牌游戏 5.ArrayList的问题及思考 …

苹果WWDC大会AI亮点:大揭晓

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

STM32-电灯,仿真

目录 前言: 一. 配置vscode 二. 新创建软件工程 三. 仿真 1.新建工程想到,选择名称和路径 2.从选中的模板创建原理图 3.不创建PCB布版设计 4.选择没有固件项目 5.完成 四.源码 五. 运行效果 六. 总结 前言: 这篇主要是配置vscode和创建仿真,和点灯的完整代码,欢迎大…

C语言 图形化界面方式连接MySQL【C/C++】【图形化界面组件分享】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;MySQL之旅_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一.配置开发环境 二…

零拷贝技术

背景 磁盘可以说是计算机系统重最慢的硬件之一&#xff0c;读写速度相对内存10以上&#xff0c;所以针对优化磁盘的技术非常的多&#xff0c;比如&#xff1a;零拷贝、直接I/O、异步I/O等等&#xff0c;这些优化的目的就是为了提高系统的吞吐量&#xff0c;另外操作系统内核中的…

风能远程管理ARMxy嵌入式系统深度解析

智能技术正以前所未有的速度融入传统能源管理体系&#xff0c;而ARMxy工业计算机作为这一变革中的关键技术载体&#xff0c;正以其独特的性能优势&#xff0c;为能源管理的智能化升级铺设道路。本文将聚焦于智能电表、太阳能电站监控、风力发电站远程管理三大应用场景&#xff…

react修改本地运行项目的端口

一、描述 如果你想让项目在你想要的端口打开的话&#xff0c;就需要进行设置 二、代码 设置一下pages.json文件就可以了&#xff0c;如下&#xff1a; 如果想打开项目不需要点击下面的链接地址&#xff0c;让他运行npm run dev之后自己直接打开到浏览器的话&#xff0c;在后…

万能表单与AI的完美融合,打造个性化AI小程序

在人工智能技术日益成熟的今天&#xff0c;如何将AI智能与用户界面无缝结合&#xff0c;已成为软件开发领域的新挑战。MyCms 以其创新的“万能表单结合AI”功能&#xff0c;为开发者提供了一个全新的解决方案&#xff0c;让个性化AI小程序的开发变得前所未有的简单和高效。 一、…

从零开始搭建Electron项目之运行例程

最好的学习方式就是&#xff1a;给一段能够运行的代码示例。 本文给出了例程资源&#xff0c;以及运行的步骤。 在国内开发electron有一点特别不好&#xff0c;就是如果不爬梯子&#xff0c;下载依赖容易出错。 一、例程资源 到如下路径下载例程到本地。 GitCode - 全球开发者…

QSlider样式示例

参考代码&#xff1a; /********************QSlider横向滑动条样式**********************/ QSlider {background-color: rgba(170, 255, 255, 100); /* 设置滑动条主体*/ }QSlider::groove:horizontal {border: 1px solid #999999;height: 8px; /* 默认…