ListView是应用程序中最常见的组件，列表往往会携带很多元素，因此需要对其进行优化。本文介绍了FlutterListView的四个优化点，非常实用，可以借鉴。
目录
序优化点1:使用生成器构建列表优化点2:禁用addAutomaticKeepAlives和addRepaintBoundaries。优化点3:尽可能使用const来修饰列表元素中的常量组件。优化点4:使用itemExtent确定列表元素的滚动方向。尺寸优化示例汇总
前言
ListView是应用程序中最常见的组件，列表通常包含许多元素。当有很多元素时，特别是当图片文件很大时，列表可能会卡住，或者在严重的情况下应用程序可能会崩溃。本文介绍了如何优化列表。
优化点1：使用 builder构建列表
当你的列表元素在动态增长时(比如拉起加载更多)，请不要直接给子元素的数组添加组件，这样会很不好。
//错误的用法
列表视图(
儿童：[
项目1，
项目2，
第三项，
.
],
)
//正确用法
ListView.builder(
itemBuilder:(context，index)=ListItem()，
itemCount:itemCount，
)
对于ListView.builder来说，列表元素是按需构建的，也就是只有那些可见的元素才会调用itemBuilder来构建元素，所以大型列表的性能开销自然会小很多。
创建一个按需创建的可滚动的线性小部件阵列。此构造函数适用于具有大量(或无限)子级的列表视图，因为只为那些实际可见的子级调用生成器。
优化点2：禁用 addAutomaticKeepAlives 和 addRepaintBoundaries 特性
这两个属性都旨在优化滚动过程中的用户体验。addAutomaticKeepAlives属性默认为true，这意味着列表元素在不可见后可以保持状态，这样当它们再次出现在屏幕上时可以快速构建。其实这是一种用空间换时间的方式，会造成一定的内存开销。可以通过将其设置为false来关闭此功能。缺点是滑动过快时，可能会出现短暂的白屏(实际上很少出现)。
AddRepaintBoundaries用重画边界包装列表元素，这样在滚动时可以避免重画。如果列表很容易绘制(当列表元素的布局相对简单时)，可以关闭此功能以提高滚动的流畅性。
addAutomaticKeepAlives:false，
addrepaintballations:false，
优化点3：尽可能将列表元素中不变的组件使用 const 修饰
使用const相当于缓存元素进行共享。如果列表元素的某些部分保持不变，可以使用const修饰。
return填充(
子级：行(
儿童：[
constListImage()，
constSizedBox(
宽度：5.0，
),
文本(index元素)，
],
),
padding:EdgeInsets.all(10.0)，
);
优化点4：使用 itemExtent 确定列表元素滚动方向的尺寸
对于很多列表来说，我们在滚动方向的大小可以根据UI设计稿提前知道。如果可以知道，那么使用itemExtent属性来确定列表元素在滚动方向上的大小可以提高性能。这是因为，如果没有指定，在滚动的过程中，将需要计算每个元素在滚动方向上的大小，从而消耗计算资源。
itemExtent:120，
优化实例
下面是一开始没有转化的列表。嗯，可以认为是垃圾代码。
classLargeListViewextendsStatefulWidget {
constLargeListView({Key？key}):超级(key:key)；
@覆盖
_ LargeListViewState createstate()=_ LargeListViewState()；
}
class _ largelistviewstateextendsstatargelistview {
@覆盖
widget build(BuildContextcontext){
return脚手架(
appBar:AppBar(
标题：文本('大列表')，
亮度：亮度。暗，
),
正文：ListView(
儿童：List.generate(
1000,
(索引)=填充(
padding:EdgeInsets.all(10.0)，
子级：行(
儿童：[
图片.网络(
https://P1-Jue Jin . byte img . com/tos-cn-I-k 3u 1 FB pfcp/7869 ea C08 a 7d 4177 b 600 DC 7d 64998204 ~ tplv-k 3u 1 FB pfcp-watermark . JPEG '，
宽度：200，
),
constSizedBox(
宽度：5.0，
),
文本(index元素)，
],
),
),
),
),
);
}
}
当然，实际不会是用列表。生成来生成列表元素，但是也不要用一个ListWidget列表对象一直往里面加列表元素，然后把这个列表作为列表视图的孩子！改造后的代码如下所示，因为将列表元素拆分得更细，代码量是多一些，但是性能上会好很多。
导入【包装：飘动/材质。镖”；
classLargeListViewextendsStatefulWidget {
constLargeListView({Key？key}):超级(关键：关键)；
@覆盖
_ large listviewstate create state()=_ large listviewstate()；
}
class _ largelistviewstateextendsstatargelistview {
@覆盖
小部件构建(BuildContextcontext){
返回脚手架（
appBar:AppBar(
标题：文本('大列表'),
亮度：亮度。暗，
),
正文：ListView.builder(
itemBuilder:(context，index)=ListItem(
索引：索引，
),
itemCount:1000，
addAutomaticKeepAlives:false，
addrepaintballations:false，
itemExtent:120.0，
),
);
}
}
classlistitemextendssstateswidget {
finalintindex
ListItem({Key？关键，需要这个。index }):super(key:key)；
@覆盖
小部件构建(BuildContextcontext){
返回填充（
子级：行（
儿童：[
constListImage()，
constSizedBox(
宽度：5.0,
),
文本('第$索引个元素'),
],
),
padding:EdgeInsets.all(10.0)，
);
}
}
classlistimageextendssstateswidget {
constListImage({Key？key}):超级(关键：关键)；
@覆盖
小部件构建(BuildContextcontext){
returnImage.network(
P1金爵街https://号。字节img。com/tos-cn-I-k 3u 1 FB pfcp/7869 ea C08 a 7d 4177 b 600 DC 7d 64998204 ~ tplv-k 3u 1 FB pfcp-水印。JPEG '，
宽度：200,
);
}
}
总结
本篇介绍了FlutterListView的四个优化要点，非常实用哦！实际上，这些要点都可以从官网的文档里找出对应的说明。因此，如果遇到了性能问题，除了搜索引擎外，也建议多看看官方的文档。另外一个，对于列表图片，有时候也需要前后端配合，比如目前的手机都是号称一亿像素的，如果上传的时候直接上传原图，那么加载如此大的图片肯定是非常消耗资源的。对于这种情况，建议是生成列表缩略图（可能需要针对不同屏幕尺寸生成不同的缩略图)。
以上就是机器人列表视图列表优化的方法详解的详细内容，更多关于机器人列表视图列表优化的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。