专栏首页flutter开发中的点滴积累Flutter中ListView加载图片数据的优化
原创

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

题记

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

重要消息


在使用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();
      },
    );
  }
}

*** 完结

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter RefreshIndicator 下拉刷新组件 Material 风格的刷新效果

    —— 优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。

    早起的年轻人
  • Flutter图片添加水印功能,Flutter保存Widget为图片

    添加水印,两种实现思路,一种是将图片与水印解码,然后混编再编码,另一种是通过Widget的方式合成。

    早起的年轻人
  • flutter的Flexible和 Expanded的区别

    不同之处是Expanded会强制填充剩余留白空间,而Flexible不会强制填充。如下图所示。

    早起的年轻人
  • Python让你自己做一个软件,自己开个聊天室,厉害吧!

    内容 知识点 asyncore 、asynchat模块运用 环境 python 3.5 功能描绘 在本实验中,我们将实现一个简略的图形界面谈天系统。我们可以经...

    企鹅号小编
  • 洛谷P4926 [1007]倍杀测量者(差分约束)

    attack
  • Spring Boot使用CORS解决跨域问题

    Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等。 CORS 与 JSONP 相比: 1、 JSONP 只能实现 GET 请...

    itlemon
  • 微信推出“收款小账本”,配合面对面收款死磕支付宝收钱码

    日前微信支付宣布推出“中小商户智慧助力计划”,一个名为“收款小账本”的官方小程序浮出水面。针对线下小商户,“收款小账本”可提供更方便的收款、对账功能。我们可以进...

    企鹅号小编
  • 性能下降的不定时炸弹_过旧的sql_profile(r3笔记第9天)

    最近这一周以来,生产环境像是得了重病的病人一样,小问题没有修好,大问题不断。IO的等待极为严重。数据库的负载达到了几十倍,上百倍。 weblogic和tuxed...

    jeanron100
  • USACO Training Section 1.2 双重回文数 Dual Palindrom

    题目描述 如果一个数从左往右读和从右往左读都是一样,那么这个数就叫做“回文数”。例如,12321就是一个回文数,而77778就不是。当然,回文数的首和尾都应是...

    风骨散人Chiam
  • 《操作系统》:理解一些基础概念

    要想了解操作系统的一些基础概念,我们首先要了解操作系统的历史,因为每个概念的来源其实都是因为在操作系统的发展阶段中存在一些问题,包括所谓的“操作系统”这个大概念...

    用户7685359

扫码关注云+社区

领取腾讯云代金券