Flutter下拉刷新上拉加载的简单实现方式一

方式一:RefreshIndicator+ListView实现

import 'package:flutter/material.dart';class SimpleRefreshDemoPage extends StatefulWidget {const SimpleRefreshDemoPage({super.key});@overrideState<StatefulWidget> createState() {return _SimpleRefreshDemoPage();}
}class _SimpleRefreshDemoPage extends State<SimpleRefreshDemoPage> {final int pageSize = 50;bool disposed = false;List<String> dataList = [];final ScrollController _scrollController = ScrollController();final GlobalKey<RefreshIndicatorState> refreshKey = GlobalKey();Future<void> onRefresh() async {await Future.delayed(const Duration(seconds: 4));dataList.clear();for (int i = 0; i < pageSize; i++) {dataList.add("refresh");}if (disposed) {return;}setState(() {});}Future<void> loadMore() async {await Future.delayed(const Duration(seconds: 4));for (int i = 0; i < pageSize; i++) {dataList.add("loadmore");}if (disposed) {return;}setState(() {});}@overridevoid initState() {super.initState();_scrollController.addListener(() {if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {loadMore();}});Future.delayed(const Duration(seconds: 0), () {refreshKey.currentState?.show();});}@overridevoid dispose() {disposed = true;super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("SimpleRefreshDemoPage"),),body: RefreshIndicator(key: refreshKey,onRefresh: onRefresh,child: ListView.builder(physics: const AlwaysScrollableScrollPhysics(),itemBuilder: (context, index) {if (index == dataList.length) {return Container(margin: const EdgeInsets.all(10),child: const Align(child: CircularProgressIndicator(),),);}return Card(child: Container(height: 60,alignment: Alignment.centerLeft,child: Text("Item ${dataList[index]} $index"),),);},itemCount: (dataList.length >= pageSize)? dataList.length + 1: dataList.length,controller: _scrollController,),),);}
}

 如何实现下拉刷新       

 RefreshIndicator

        RefreshIndicator 是 Flutter 中用于实现下拉刷新功能的一个组件。RefreshIndicator 包裹一个可滚动的子组件,如 `ListView` 或 `GridView`,当用户下拉到列表顶部时,会触发刷新操作。上面的例子中RefreshIndicator包裹在了ListView。

        `onRefresh` 是一个返回 `Future` 的异步函数,用于执行刷新操作。

        关键属性

  • onRefresh`: 必须实现的回调函数,定义刷新时的操作。
  • `child`: 需要包裹的可滚动子组件。
  • `color`: 刷新指示器的进度条颜色。
  • `backgroundColor`: 刷新指示器的背景色。
  • `displacement`: 指示器开始显示时与顶部的距离。

如何实现下拉加载

ScrollController

   _scrollController.addListener(() {if (_scrollController.position.pixels ==_scrollController.position.maxScrollExtent) {loadMore();}});

如何检测用户是否滚动到了 `ScrollView` 的底部?

_scrollController.position.pixels ==_scrollController.position.maxScrollExtent

_scrollController.position.pixels` :表示当前滚动的位置。

`_scrollController.position.maxScrollExtent` :表示可滚动区域的最大值。

上面两个值相等时,说明用户已经滚动到了底部。

`bool disposed` 字段作用

        在上面的代码中,`bool disposed` 字段用于指示 `State` 对象是否已经被销毁。当 `dispose` 方法被调用时,`disposed` 被设置为 `true`。这个字段主要用于在异步操作完成后,确保不会调用已经被销毁的 `State` 对象的 `setState` 方法。

作用分析

1.防止在销毁后调用 `setState`:
  • 异步操作(如 `Future.delayed`)在完成后,可能会尝试调用 `setState` 来更新 UI。然而,如果在异步操作执行期间,用户已经导航离开了当前页面,导致 `State` 对象被销毁,那么调用 `setState` 就会抛出异常,因为 `State` 已经不再是活动的。
  • 通过检查 `disposed` 字段,可以在调用 `setState` 前确认 `State` 是否仍然有效,从而避免在组件销毁后对其进行不必要的更新。
2.提高代码的稳健性:
  • 这种模式是一种防御性编程的方法,确保应用程序在面对不确定的异步执行时仍然是稳定的。
 @overridevoid dispose() {disposed = true;super.dispose();}

  

  Future<void> onRefresh() async {await Future.delayed(const Duration(seconds: 4));dataList.clear();for (int i = 0; i < pageSize; i++) {dataList.add("refresh");}if (disposed) {return;}setState(() {});}Future<void> loadMore() async {await Future.delayed(const Duration(seconds: 4));for (int i = 0; i < pageSize; i++) {dataList.add("loadmore");}if (disposed) {return;}setState(() {});}

在 `onRefresh` 和 `loadMore` 方法中,`disposed` 被用来检查 `State` 是否已经被销毁。如果 `disposed` 为 `true`,则不再调用 `setState`,从而避免可能的异常。


3.总结


使用 `disposed` 字段可以有效地防止在组件销毁后进行不必要或有害的 UI 更新。这种模式特别适用于涉及异步操作的 Flutter 应用开发,确保代码在处理 `State` 生命周期时更加健壮。

        在 Flutter 中,`dispose` 方法是一个非常重要的生命周期方法,用于在不再需要一个对象时释放资源。通常,`dispose` 方法用于清理那些可能导致内存泄漏的资源,如控制器、监听器和订阅等。

 `dispose` 方法的常规用途

`dispose` 方法在 `StatefulWidget` 的状态对象中被重写。它在以下情况下被调用:

  • Widget 被从树中永久移除时。
  • 需要释放资源以避免内存泄漏时。

`dispose` 方法的典型用法

1.释放控制器:
  • 常用于释放 `AnimationController`、`TextEditingController`、`PageController` 等控制器。
2.取消订阅:
  • 用于取消流(stream)的订阅,以防止内存泄漏。
3.移除监听器:
  • 移除添加到某些对象上的监听器,例如 `ScrollController` 的监听器。

重要注意事项

  • 调用 `super.dispose()`:在重写 `dispose` 方法时,确保在最后调用 `super.dispose()`。这会调用父类的 `dispose` 方法,完成必要的清理。
  • 确保资源释放:所有在 `initState` 或其他地方创建的需要手动管理的资源,都应在 `dispose` 中被正确释放。
  • 流的取消:对于任何流的订阅,一定要在 `dispose` 中调用 `cancel` 方法。

通过正确使用 `dispose` 方法,你可以确保你的应用程序以更高效的方式管理内存,避免可能的内存泄漏问题。

       

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

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

相关文章

VectorDBQA 问答系统

我来解释一下VectorDBQA(Vector Database Question Answering)的用途和实现方式。 VectorDBQA 是一个强大的问答系统&#xff0c;它结合了向量数据库和问答功能。以下是它的主要用途和优势&#xff1a; 智能文档检索和问答 自动从大量文档中找到相关信息生成准确的答案支持对长…

静态库、动态库、framework、xcframework、use_frameworks!的作用、关联核心SDK工程和测试(主)工程、设备CPU架构

1.1库的概念 库&#xff1a;程序代码的集合&#xff0c;编译好的二进制文件加上头文件供使用&#xff0c;共享程序代码的一种方式。 1.2库的分类 根据开源情况分为&#xff1a;开源库&#xff08;能看到具体实现&#xff09;、闭源库&#xff08;只公开调用的的接口&#xf…

天地图入门|标注|移动飞行|缩放,商用地图替换

“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。集成了来自国家、省、市&#xff08;县&#xff09;各级测绘地理信息部门&#xff0c;以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源&#xff0c;如果做的项目是政府部门、企事业单位尽量选…

Webserver(5.3)线程池实现

目录 线程池locker.hthreadpool.h 线程池 相比于动态地创建子线程&#xff0c;选择一个已经存在的子线程的代价显然要小得多。至于主线程选择哪个子线程来为新任务服务&#xff0c;有多种方式&#xff1a; 主线程使用某种算法来主动选择子线程。最简单、最常用的算法是随机算…

【重装系统后重新配置2】pycharm 终端无法激活conda环境

pycharm 终端无法激活 conda 环境&#xff0c;但是 Windows本地终端是可以激活的 原因是pycharm 默认的终端是 Windows PowerShell 解决方法有两个&#xff1a; 一、在设置里&#xff0c;修改为cmd 二、下面直接选择

云轴科技ZStack助力新远科技开启化工行业智能制造新篇章

新远科技基于云轴科技ZStack Cube超融合和ZStack Zaku容器云平台打造了灵活高效的IT基础设施&#xff0c;实现了IaaS和PaaS层的全面覆盖&#xff0c;优化了资源利用率&#xff0c;降低了硬件成本和运维复杂性&#xff0c;同时强化了数据安全和业务连续性。 化工行业的数字化先…

test 是 JavaScript 中正则表达式对象 (RegExp) 的一种方法,用于测试一个字符串是否匹配某个正则表达式

在你的代码中&#xff0c;test 方法用于验证扫描结果是否符合特定的格式要求。具体来说&#xff0c;/^[A-Za-z\d]{16}$/.test(res.result) 这一行代码用于检查扫描结果 res.result 是否是一个由16个字母或数字组成的字符串。 test 方法的作用 正则表达式匹配&#xff1a; ^ 表…

Golang | Leetcode Golang题解之第546题移除盒子

题目&#xff1a; 题解&#xff1a; func removeBoxes(boxes []int) int {dp : [100][100][100]int{}var calculatePoints func(boxes []int, l, r, k int) intcalculatePoints func(boxes []int, l, r, k int) int {if l > r {return 0}if dp[l][r][k] 0 {r1, k1 : r, k…

数字时代企业的基本数据丢失预防策略

在当今的数字时代&#xff0c;数据丢失预防对企业的重要性怎么强调也不为过。了解与数据丢失相关的风险至关重要&#xff0c;因为人为错误和网络攻击等常见原因可能会产生严重后果。 实施有效的数据丢失预防策略&#xff08;例如安全协议、定期数据备份和员工培训&#xff09;…

使用Element UI实现一个拖拽图片上传,并可以Ctrl + V获取图片实现文件上传

要在 Element UI 的拖拽上传组件中实现 Ctrl V 图片上传功能&#xff0c;可以通过监听键盘事件来捕获粘贴操作&#xff0c;并将粘贴的图片数据上传到服务器。 版本V1&#xff0c;实现获取粘贴板中的文件 注意&#xff0c;本案例需要再你已经安装了Element UI并在项目中正确配…

uni-app小程序echarts中tooltip被遮盖

图表中的文案过长&#xff0c;tooltip溢出容器&#xff0c;会被遮盖住 解决方案&#xff1a; 在echarts的tooltip中有confine属性可将tooltip限制在容器内&#xff0c;不超过容器&#xff0c;就不易被遮盖

axios请求中的data和params的区别

一、 http&#xff1a;超文本传输协议&#xff0c;规定浏览器和服务器之间传输数据的格式 域名&#xff1a;标记访问服务器在互联网中的方位 资源路径&#xff1a;标记资源在服务器下的具体位置 url查询参数&#xff1a;浏览器提供给服务器的额外信息&#xff0c;让服务器返…

设计模式-七个基本原则之一-开闭原则 + SpringBoot案例

开闭原则:(SRP) 面向对象七个基本原则之一 对扩展开放&#xff1a;软件实体&#xff08;类、模块、函数等&#xff09;应该能够通过增加新功能来进行扩展。对修改关闭&#xff1a;一旦软件实体被开发完成&#xff0c;就不应该修改它的源代码。 要看实际场景&#xff0c;比如组内…

Scala的List

1.定义List的类型方式为List[ T ],T表示为数据类型。 2.List是一个不可变的集合&#xff0c;想要获取可变的序列就需要ListBuffer&#xff0c;通过-或方式添加或删除元素&#xff0c;还可以调用remove方法移除元素。 def main(args: Array[String]): Unit {//1.建立 可变列表…

[zotero]Ubuntu搭建WebDAV网盘

搭建Ubuntu Apache WebDAV网盘的综合步骤&#xff0c;使用666端口&#xff1a; 安装Apache和WebDAV模块&#xff1a; sudo apt update sudo apt install apache2 sudo a2enmod dav sudo a2enmod dav_fs创建WebDAV目录&#xff1a; sudo mkdir /var/www/webdav sudo chown www-d…

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、1×1 卷积层、汇聚层、多通道汇聚层

【深度学习】— 多输入多输出通道、多通道输入的卷积、多输出通道、11 卷积层、汇聚层、多通道汇聚层 多输入多输出通道多通道输入的卷积示例&#xff1a;多通道的二维互相关运算 多输出通道实现多通道输出的互相关运算 11 卷积层11 卷积的作用 使用全连接层实现 11 卷积小结 …

如何解读多年连续发布的指数?

解读多年连续发布的指数是投资者和分析师理解市场趋势、预测未来走向的重要手段。以下是一些关键步骤和方法&#xff0c;有助于系统地解读多年连续发布的指数&#xff1a; 一、收集历史数据 来源&#xff1a;从财经网站、证券交易所官方网站或专业的金融数据服务提供商处获取…

Spring——入门

概述 Spring是什么 Spring是一款主流的Java EE轻量级开源框架&#xff0c;其目的适用于简化Java企业级应用开发难度和开发周期。Spring用途不仅限于服务器端的开发&#xff0c;从简单性、可测试性和松耦合的角度而言&#xff0c;任何Java应用都可以从Spring中受益。Spring框架…

计算机毕业设计Python+Neo4j中华古诗词可视化 古诗词智能问答系统 古诗词数据分析 古诗词情感分析 PyTorch Tensorflow LSTM

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

vue+exceljs前端下载、导出xlsx文件

首先安装插件 npm install exceljs file-saver第一种 简单导出 //页面引入 import ExcelJS from exceljs; import {saveAs} from file-saver; export default {methods: { /** 导出操作 */async handleExportFun() {let that this// 获取当前年月日 用户下载xlsx的文件名称设…