【Flutter】列表流畅性优化

前言

在日常APP的开发中,列表是使用频率最高的,这里讲述在Flutter中优化列表的滑动速度与流畅度,以来提高用户的体验。

方案

1、使用ListView.builder代替ListView

ListView.builder在创建列表的时候要比ListView更高效,因为ListView.builder只在需要的时候创建那些可见的列表。

ListView.builder(itemCount: 100,itemBuilder: (context, index) {return ListTile(title: Text('ZFJ index = $index'),);},
);

2、使用const修饰符

在构建列表的时候尽量用const修饰符来创建不变的控件,这样可以减少控件的重复创建,从来提高性能。

return const ListTile(title: Text('ZFJ index = $index'),
);

3、避免使用复杂的布局

简化列表的布局,尽量减少嵌套重量级的部件,比如Container或者Column,使用轻量级的部件,比如Text、Padding、SizedBox等等。

👉👉👉什么是轻量级部件?👈👈👈

在 Flutter 中,轻量级是个相对概念,轻量级的部件是那些尽量减少计算和绘制开销的组件。它们对性能影响较小,适合在性能敏感的场景中使用,如列表项、频繁重建的视图等。以下是一些常见的轻量级部件:

Container:

简单的容器组件,用于布局、背景颜色、边框等。比 DecoratedBox 更轻量。

Text:

用于显示文本,是非常轻量级的组件。避免过多的 Text.rich,因为它会增加计算开销。

Padding:

用于添加内边距的轻量级组件。比直接在 Container 中设置 padding 更高效。

Align:

用于对齐子组件的轻量级组件。比使用 Center 或 Padding+Align 组合更高效。

SizedBox:

用于设置固定尺寸的轻量级组件。比在 Container 中设置 width 和 height 更高效。

Icon:

用于显示图标的轻量级组件。尽量避免使用过多自定义绘制的图标。

ClipRRect:

用于裁剪圆角矩形的轻量级组件。比使用 Container+BoxDecoration 更高效。

Opacity:

用于设置透明度的轻量级组件。比使用复杂的 DecoratedBox 透明度设置更高效。

Flexible 和 Expanded:

用于在 Row 和 Column 中调整子组件大小的轻量级组件。比直接在 Container 中设置 width 和 height 更高效。

4、使用CacheExtent

通过设置 cacheExtent 属性,可以增加预加载的区域大小,从而减少滑动时的卡顿现象。

ListView.builder(itemCount: 100,cacheExtent: 300, // 默认值是 250.0,单位是像素itemBuilder: (context, index) {return ListTile(title: Text('Item $index'),);},
);

5、使用Image的缓存功能

如果列表项中包含图片,可以使用 CachedNetworkImage 等库来缓存图片,避免每次滑动时重新加载图片。

import 'package:cached_network_image/cached_network_image.dart';ListTile(leading: CachedNetworkImage(imageUrl: 'https://zfjsafe.com/images/ZFJObsLib.png',placeholder: (context, url) => CircularProgressIndicator(),errorWidget: (context, url, error) => Icon(Icons.error),),title: Text('ZFJ Index = $index'),
);

6、避免不必要的重绘

确保只有需要更新的部分进行重绘,可以使用 StatefulWidget 和 setState 来实现局部刷新,而不是重建整个列表。

7、使用 AutomaticKeepAliveClientMixin

如果需要保留列表项的状态,可以使用 AutomaticKeepAliveClientMixin 来保留列表项的状态,而不是每次滑动时都重新构建。

class ZFJListItem extends StatefulWidget {_ZFJListItemState createState() => _ZFJListItemState();
}class _ZFJListItemState extends State<ZFJListItem> with AutomaticKeepAliveClientMixin {Widget build(BuildContext context) {super.build(context);return ListTile(title: Text('ZFJ'),);}bool get wantKeepAlive => true;
}

8、使用ReorderableListView

如果需要支持拖拽排序,可以使用 ReorderableListView,这种组件在处理大量数据时更加高效。

ReorderableListView(onReorder: (oldIndex, newIndex) {setState(() {if (newIndex > oldIndex) {newIndex -= 1;}final item = _items.removeAt(oldIndex);_items.insert(newIndex, item);});},children: _items.map((item) {return ListTile(key: ValueKey(item),title: Text(item),);}).toList(),
);

结束语

通过这些优化策略,可以显著提升 Flutter 应用中列表的滑动性能,提供更加流畅的用户体验,欢迎大家补充。
在这里插入图片描述

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

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

相关文章

完成一个逻辑,点击一个按钮让按钮旁边的input输入框中写入‘你好‘

问: 完成一个逻辑,点击一个按钮让按钮旁边的input输入框中写入你好 回答: <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1…

AUTOSAR NvM模块(六)

NvMRbRamInitCheck 允许选择NvM模块在发生复位时的行为。 NVM_RB_RAM_INIT_CHECK_NONE&#xff1a;在复位后&#xff0c;NvM_ReadAll()会读取所有适合ReadAll的块。 NVM_RB_RAM_INIT_CHECK_QUICK&#xff1a;在复位后&#xff0c;会检查保存区是否丢失。如果未丢失&#xff…

工程技术类SCI,低分快刊首选期刊,无版面费!

1、期刊概况 【期刊简介】IF&#xff1a;1.0-2.0&#xff0c;JCR2区&#xff0c;中科院4区&#xff1b; 【检索情况】SCIE在检 【版面类型】正刊&#xff0c;仅少量版面&#xff1b; 【出刊频率】年刊 2、征稿范围 本刊主要是发表有关能源转型和可再生能源需求相关的研究文…

Snappy使用

Snappy使用 Snappy是谷歌开源的压缩和解压的开发包&#xff0c;目标在于实现高速的压缩而不是最大的压缩 项目地址&#xff1a;GitHub - google/snappy&#xff1a;快速压缩器/解压缩器 Cmake版本升级 该项目需要比较新的cmake&#xff0c;CMake 3.16.3 or higher is requi…

一首歌的时间 写成永远

大家好&#xff0c;我是秋意零。 就在&#xff0c;2024年6月20日。我本科毕业了&#xff0c;之前专科毕业挺有感触&#xff0c;也写了一篇文章进行记录。如今又毕业了&#xff0c;还是写一篇文章记录吧&#xff01;&#xff01; 专科毕业总结&#xff1a;大学三年总结&#xf…

Jtti:怎么在FTP服务器上实现多种操作系统的客户端连接?

随着全球互联网的普及&#xff0c;文件传输协议(FTP)成为了跨平台文件共享和传输的主流选择之一。FTP服务器作为地方性的网络存储设施&#xff0c;其支持多种操作系统的客户端连接&#xff0c;为用户提供了便捷的文件存取方式。无论您使用的是Windows、MacOS还是Linux操作系统&…

【SpringBoot3学习 | 第1篇】SpringBoot3介绍与配置文件

文章目录 前言 一. SpringBoot3介绍1.1 SpringBoot项目创建1. 创建Maven工程2. 添加依赖(springboot父工程依赖 , web启动器依赖)3. 编写启动引导类(springboot项目运行的入口)4. 编写处理器Controller5. 启动项目 1.2 项目理解1. 依赖不需要写版本原因2. 启动器(Starter)3. Sp…

vue项目访问 域名/index.html 空页面问题

很大可能是vue前端没做404页面&#xff0c;在路由不匹配时会跳转到空路由页面。 也可以把所有路由不匹配的网址全部跳转到域名首页。防止出现404或者页面错误。 如果使用docker nginx部署项目&#xff0c;配置文件上会有 try_files $uri $uri/ /index.html; 这段配置会尝试…

二刷 动态规划

什么是动态规划 Dynamic Programming DP 如果某一问题有很多重叠子问题&#xff0c;使用动态规划时最有效的 动态规划中每一个状态是由上一个状态推导出来的。 动规五部曲 1.确定dp数组以及下标的含义 2.确定递归公式 3.dp数组如何初始化 4.确定遍历顺序 5.举例推导dp数…

【java计算机毕设】仓库管理系统 MySQL springboot vue3 Maven 项目源码代码

目录 1项目功能 2项目介绍 3项目地址 1项目功能 【java计算机毕设】仓库管理系统MySQL springboot vue3 Maven小组项目设计源代码 2项目介绍 系统功能&#xff1a; vue3仓库管理系统&#xff0c;主要功能包含&#xff1a;个人信息管理&#xff0c;仓库管理&#xff0c;员工…

java设计模式(七)适配器模式(Adapter Pattern)

1、模式介绍&#xff1a; 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换成客户希望的另外一个接口。适配器模式通常用于需要复用现有的类&#xff0c;但是接口与客户端的要求不完全匹配的情况。它包括两种形式&…

智能洗车管理系统设计

智能洗车管理系统设计的核心在于整合先进的信息技术与自动化设备&#xff0c;以提升洗车服务的效率、降低成本并增强客户体验。以下是一个概括性的设计框架&#xff1a; 1. 系统需求分析 用户需求&#xff1a;了解车主对于快速、便捷、高质量洗车服务的需求。业务需求&#xf…

【深度学习】注意力机制

https://blog.csdn.net/weixin_43334693/article/details/130189238 https://blog.csdn.net/weixin_47936614/article/details/130466448 https://blog.csdn.net/qq_51320133/article/details/138305880 注意力机制&#xff1a;在处理信息的时候&#xff0c;会将注意力放在需要…

gitee项目上不同的项目分别使用不用的用户上传

最近使用根据需要&#xff0c;希望不同的项目使用不同的用户上传&#xff0c;让不同的仓库展示不同的用户名&#xff01;&#xff01;&#xff01; 第一步查看全局的用户信息&#xff1a; # 查看目前全局git配置信息 git config -l #会输出全局的git配置信息 第二步进入到要设…

大科技公司大量裁员背后的真相

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

冒泡排序、选择排序、菱形

冒泡排序、选择排序、菱形 文章目录 一、冒泡排序二、选择排序三、菱形 一、冒泡排序 思路&#xff1a; 外层&#xff08;第一层&#xff09;循环控制循环次数&#xff0c;和业务无关 内层&#xff08;第二层&#xff09;循环用于比较相邻的2个值的大小&#xff0c;根据小到大…

【Python】语法入门

文章目录 Python 基础语法&#xff1a;打印和变量打印和变量的基本语法打印变量 变量操作变量的命名规则打印和变量的应用场景示例&#xff1a;基本计算器 Python 基础语法&#xff1a;列表推导式列表推导式的基本语法基本示例带条件的列表推导式列表推导式的应用场景 Python 基…

B站、小红书“崩”了!阿里云紧急回应

7月2日&#xff0c;“B站崩了”“小红书崩了”冲上微博热搜&#xff01;据悉&#xff0c;“崩了”的原因是阿里云上海服务出现异常。 B站App无法使用浏览历史关注等内容&#xff0c;消息界面、更新界面、客服界面均不可用&#xff0c;用户也无法评论和发弹幕&#xff0c;视频评…

java byte[] 数据类型介绍

在Java中&#xff0c;byte[]&#xff08;字节数组&#xff09;是一种用于存储一系列字节数据的数组类型。它常用于处理二进制数据&#xff0c;例如文件读写、网络传输、加密解密等。每个字节&#xff08;byte&#xff09;是一个8位的有符号整数&#xff0c;取值范围为-128到127…

鸿蒙开发设备管理:【@ohos.multimodalInput.touchEvent (触摸输入事件)】

触摸输入事件 设备上报的触屏事件。 说明&#xff1a; 本模块首批接口从API version 9开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import {Action,ToolType,SourceType,Touch,TouchEvent} from ohos.multimodalInput.touchEvent;…