亲宝软件园·资讯

展开

Android ListView列表优化

岛上码农 人气:2

前言

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

总结

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

加载全部内容

相关教程
猜你喜欢
用户评论