这篇文章主要讲解了“Android ListView列表怎么优化”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android ListView列表怎么优化”吧!
当你的列表元素是动态增长的时候(比如上拉加载更多),请不要直接用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.
这两个属性都是为了优化滚动过程中的用户体验的。addAutomaticKeepAlives
特性默认是 true
,意思是在列表元素不可见后可以保持元素的状态,从而在再次出现在屏幕的时候能够快速构建。这其实是一个拿空间换时间的方法,会造成一定程度的内存开销。可以设置为 false
关闭这一特性。缺点是滑动过快的时候可能会出现短暂的白屏(实际会很少发生)。
addRepaintBoundaries
是将列表元素使用一个重绘边界(Repaint Boundary)包裹,从而使得滚动的时候可以避免重绘。而如果列表很容易绘制(列表元素布局比较简单的情况下)的时候,可以关闭这个特性来提高滚动的流畅度。
addAutomaticKeepAlives: false,
addRepaintBoundaries: false,
使用 const
相当于将元素缓存起来实现共用,若列表元素某些部分一直保持不变,那么可以使用 const
修饰。
return Padding(
child: Row(
children: [
const ListImage(),
const SizedBox(
width: 5.0,
),
Text('第$index 个元素'),
],
),
padding: EdgeInsets.all(10.0),
);
对于很多列表,我们在滚动方向上的尺寸是提前可以根据 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://cache.yisu.com/upload/information/20220517/112/2097.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://cache.yisu.com/upload/information/20220517/112/2097.jpg',
width: 200,
);
}
}
感谢各位的阅读,以上就是“Android ListView列表怎么优化”的内容了,经过本文的学习后,相信大家对Android ListView列表怎么优化这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。