Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In order to reduce the network bandwidth and make the list more smooth, we need to understand lazy loading, also known as lazy loading. How does flutter achieve lazy loading?

About the login interface of the last chapter, you are really difficult for me, I am also asking UI little sister, you give me a little praise power ~

Lazy loading, also known as lazy loading, refers to the lazy loading of images on long web pages and is a great way to optimize web page performance. Images outside the viewable area are not loaded until the user scrolls to them. This is the opposite of image preloading, and using lazy loading on long web pages will make web pages load faster. In some cases, it can also help reduce server load. Often applicable to a lot of pictures, pages long e-commerce site scene.

There are only a few points for ListView optimization:

1. Optimization of Flutter ListView loading images (lazy loading)

2. Cache the images using thumbnails when the Flutter ListView loads

3.Flutter reduces build() time

In this chapter, we will realize the optimization function of wechat moments, that is, when the page slides, pictures will not be loaded, and when the interface stops sliding, pictures will be loaded.
Effect:

1. Understand widget NotificationListener :NotificationListener

NotificationListener attributes:

  • Child: widgetCopy the code
  • OnNotification: NotificationListenerCallback < Notification >Copy the code

    The return value true indicates that NotificationListener is not sent up the next level after the current notification is consumed. False indicates that NotificationListener is sent up the next level. The important thing to note here is that notifications are delivered from the bottom up, which is why they are called bubble notifications!

2. A bool is required to control loading

Bool isLoadingImage = true;Copy the code

3. Write a method to pass a notification to a NotificationListener

Bool notificationFunction(Notification Notification) {/// Notification type switch (notification.runtimeType) {case ScrollStartNotification: print(" start scrolling "); IsLoadingImage = false; break; Case ScrollUpdateNotification: print (" rolling "); break; Case ScrollEndNotification: print(" scrollstop "); SetState (() {isLoadingImage = true; }); break; Case OverscrollNotification: print(" scroll to the edge "); break; } return true; }Copy the code

4. Load different components according to bool values

ListView buildListView() {return listview.separated (itemCount: 1000, itemCount = separated) (BuildContext context, Int index) {if (isLoadingImage) {// return Image.net Work (netImageUrl, width: 100, height: 100, fit: BoxFit.fitHeight, ); } else {return Container(height: 100, width: 100, child: Text(" loading... )); // Placeholder}}, // build the Widget separatorBuilder between each sub-item: (BuildContext Context, int index) {return new Divider(); }); }Copy the code

Complete code:

Class ScrollHomePageState extends State {class ScrollHomePageState extends State {bool isLoadingImage = true; /// Network image address String netImageUrl = "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4ce25d48b8405cbf5444b6195928d4~tplv-k3u1fbpfcp-no-mark:0:0:0:0.aweb p"; @override Widget build(BuildContext context) {return Scaffold(appBar: new appBar (title: Text(" detail "),), /// NotificationListener(/// / The scroll component in the child Widget sends a scroll notification when it slides child: buildListView(), /// Calls this method onNotification whenever there is a scroll notification: notificationFunction, ), ); } bool notificationFunction(Notification Notification) {/// Notification type switch (notification.runtimeType) {case ScrollStartNotification: print(" start scrolling "); IsLoadingImage = false; break; Case ScrollUpdateNotification: print (" rolling "); break; Case ScrollEndNotification: print(" scrollstop "); SetState (() {isLoadingImage = true; }); break; Case OverscrollNotification: print(" scroll to the edge "); break; } return true; } ListView buildListView() {return listview.separated (itemCount: 1000, itemCount = separated) (BuildContext context, Int index) {if (isLoadingImage) {// return Image.net Work (netImageUrl, width: 100, height: 100, fit: BoxFit.fitHeight, ); } else {return Container(height: 100, width: 100, child: Text(" loading... )); // Placeholder}}, // build the Widget separatorBuilder between each sub-item: (BuildContext Context, int index) {return new Divider(); }); }}Copy the code

Easy, but lazy loading is a real interview question, did you get it?