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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。