Flutter中ListView加载图片数据的优化

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

**	你可能须要
CSDN	网易云课堂教程
掘金	EDU学院教程
知乎	Flutter系列文章

---

在使用ListView懒加载模式时，当ListView的Item中有图片信息时，在快速滚动过程当中会大量的浪费流量与内存，甚至会形成在滚动过程当中页面的卡顿效果。
在这里提出优化方案，当开始滚动时不加载图片，滚动结束后再加载图片，这个优化方案实现的效果以下图所示，在快速滑动列表数据时，图片未加载，运行内存无明显波动。

实现代码以下：

class ListViewUsePage13 extends StatefulWidget { 
 
   
  @override
  State<StatefulWidget> createState() { 
 
   
    return ScrollHomePageState();
  }
}

class ScrollHomePageState extends State { 
 
   
  ///加载图片的标识
  bool isLoadingImage = true;
  ///网络图片地址
  String netImageUrl =
      "https://images.gitee.com/uploads/images/2020/0602/203000_9fa3ddaa_568055.png";
  @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();
      },
    );
  }
}

*** 完结

本文同步分享在 博客“早起的年轻人”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。