题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

在使用ListView懒加载模式时，当ListView的Item中有图片信息时，在快速滚动过程中会大量的浪费流量与内存，甚至会造成在滚动过程中页面的卡顿效果。

在这里提出优化方案，当开始滚动时不加载图片，滚动结束后再加载图片，这个优化方案实现的效果如下图所示，在快速滑动列表数据时，图片未加载，运行内存无明显波动。

实现代码如下：

class ListViewUsePage13 extends StatefulWidget {  @override  State<StatefulWidget> createState() {    return ScrollHomePageState();  }}class ScrollHomePageState extends State {  ///加载图片的标识  bool isLoadingImage = true;  ///网络图片地址  String netImageUrl =      ";;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: new AppBar(        title: Text("详情"),      ),      ///列表      body: NotificationListener(        ///子Widget中的滚动组件滑动时就会分发滚动通知        child: buildListView(),        ///每当有滑动通知时就会回调此方法        onNotification: notificationFunction,      ),    );  }  bool notificationFunction(Notification notification) {    ///通知类型    switch (notification.runtimeType) {      case ScrollStartNotification:        print("开始滚动");        ///在这里更新标识 刷新页面 不加载图片        isLoadingImage = false;        break;      case ScrollUpdateNotification:        print("正在滚动");        break;      case ScrollEndNotification:        print("滚动停止");        ///在这里更新标识 刷新页面 加载图片        setState(() {          isLoadingImage = true;        });        break;      case OverscrollNotification:        print("滚动到边界");        break;    }    return true;  }  ListView buildListView() {    return ListView.separated(      itemCount: 10000, //子条目个数      ///构建每个条目      itemBuilder: (BuildContext context, int index) {        if (isLoadingImage) {          ///这时将子条目单独封装在了一个StatefulWidget中          return Image.network(            netImageUrl,            width: 100,            height: 100,            fit: BoxFit.fitHeight,          );        } else {          return Container(            height: 100,            width: 100,            child: Text("加载中..."),          ); //占位        }      },      ///构建每个子Item之间的间隔Widget      separatorBuilder: (BuildContext context, int index) {        return new Divider();      },    );  }}

完毕