你的列表很卡？这4个优化能让你的列表丝般顺滑

前言

列表 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://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7869eac08a7d4177b600dc7d64998204~tplv-k3u1fbpfcp-watermark.jpeg',
 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://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7869eac08a7d4177b600dc7d64998204~tplv-k3u1fbpfcp-watermark.jpeg',
 width: 200,
 );
 }
}


总结

本篇介绍了 Flutter 

ListView

 的4个优化要点，非常实用哦！实际上，这些要点都可以从官网的文档里找出对应得说明。因此，如果遇到了性能问题，除了搜索引擎外，也建议多看看官方的文档。另外一个，对于列表图片，有时候也需要前后端配合，比如目前的手机都是号称1亿像素的，如果上传的时候直接上传原图，那么加载如此大的图片肯定是非常消耗资源的。对于这种情况，建议是生成列表缩略图（可能需要针对不同屏幕尺寸生成不同的缩略图，比如掘金的文章头图，就分了几种分辨率）。

欢迎关注个人公众号：

岛上码农