文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android ListView列表怎么优化

2023-06-30 14:18

关注

这篇文章主要讲解了“Android ListView列表怎么优化”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android ListView列表怎么优化”吧!

优化点1:使用 builder构建列表

当你的列表元素是动态增长的时候(比如上拉加载更多),请不要直接用children 的方式,一直往children 的数组增加组件,那样会很糟糕。

//糟糕的用法ListView(  children: [    item1,    item2,    item3,    ...  ],)//正确的用法ListView.builder(  itemBuilder: (context, index) => ListItem(),  itemCount: itemCount,)

对于 ListView.builder 是按需构建列表元素,也就是只有那些可见的元素才会调用itemBuilder 构建元素,这样对于大列表而言性能开销自然会小很多。

Creates a scrollable, linear array of widgets that are created on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

优化点2:禁用 addAutomaticKeepAlives 和 addRepaintBoundaries 特性

这两个属性都是为了优化滚动过程中的用户体验的。addAutomaticKeepAlives 特性默认是 true,意思是在列表元素不可见后可以保持元素的状态,从而在再次出现在屏幕的时候能够快速构建。这其实是一个拿空间换时间的方法,会造成一定程度的内存开销。可以设置为 false 关闭这一特性。缺点是滑动过快的时候可能会出现短暂的白屏(实际会很少发生)。

addRepaintBoundaries 是将列表元素使用一个重绘边界(Repaint Boundary)包裹,从而使得滚动的时候可以避免重绘。而如果列表很容易绘制(列表元素布局比较简单的情况下)的时候,可以关闭这个特性来提高滚动的流畅度。

addAutomaticKeepAlives: false,addRepaintBoundaries: false,

优化点3:尽可能将列表元素中不变的组件使用 const 修饰

使用 const 相当于将元素缓存起来实现共用,若列表元素某些部分一直保持不变,那么可以使用 const 修饰。

return Padding(  child: Row(    children: [      const ListImage(),      const SizedBox(        width: 5.0,      ),      Text('第$index 个元素'),    ],  ),  padding: EdgeInsets.all(10.0),);

优化点4:使用 itemExtent 确定列表元素滚动方向的尺寸

对于很多列表,我们在滚动方向上的尺寸是提前可以根据 UI设计稿知道的,如果能够知道的话,那么使用 itemExtent 属性制定列表元素在滚动方向的尺寸,可以提升性能。这是因为,如果不指定的话,在滚动过程中,会需要推算每个元素在滚动方向的尺寸从而消耗计算资源。

itemExtent: 120,

优化实例

下面是一开始未改造的列表,嗯,可以认为是垃圾代码

class LargeListView extends StatefulWidget {  const LargeListView({Key? key}) : super(key: key);  @override  _LargeListViewState createState() => _LargeListViewState();}class _LargeListViewState extends State<LargeListView> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('大列表'),        brightness: Brightness.dark,      ),      body: ListView(        children: List.generate(          1000,          (index) => Padding(            padding: EdgeInsets.all(10.0),            child: Row(              children: [                Image.network(                  'https://file.lsjlt.com/upload/202306/28/uogn1xvfgp3.jpg',                  width: 200,                ),                const SizedBox(                  width: 5.0,                ),                Text('第$index 个元素'),              ],            ),          ),        ),      ),    );  }}

当然,实际不会是用 List.generate 来生成列表元素,但是也不要用一个 List<Widget> 列表对象一直往里面加列表元素,然后把这个列表作为 ListView 的 children!改造后的代码如下所示,因为将列表元素拆分得更细,代码量是多一些,但是性能上会好很多。

import 'package:flutter/material.dart';class LargeListView extends StatefulWidget {  const LargeListView({Key? key}) : super(key: key);  @override  _LargeListViewState createState() => _LargeListViewState();}class _LargeListViewState extends State<LargeListView> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('大列表'),        brightness: Brightness.dark,      ),      body: ListView.builder(        itemBuilder: (context, index) => ListItem(          index: index,        ),        itemCount: 1000,        addAutomaticKeepAlives: false,        addRepaintBoundaries: false,        itemExtent: 120.0,      ),    );  }}class ListItem extends StatelessWidget {  final int index;  ListItem({Key? key, required this.index}) : super(key: key);  @override  Widget build(BuildContext context) {    return Padding(      child: Row(        children: [          const ListImage(),          const SizedBox(            width: 5.0,          ),          Text('第$index 个元素'),        ],      ),      padding: EdgeInsets.all(10.0),    );  }}class ListImage extends StatelessWidget {  const ListImage({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return Image.network(      'https://file.lsjlt.com/upload/202306/28/uogn1xvfgp3.jpg',      width: 200,    );  }}

感谢各位的阅读,以上就是“Android ListView列表怎么优化”的内容了,经过本文的学习后,相信大家对Android ListView列表怎么优化这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯