• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
  • This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

I believe that many people in that three days do not hit the roof jie tile age, more or less dry a variety of forms of home demolition activities, including but not limited to dismantling tools, dismantling toys, and even dismantling furniture and appliances;

After harvesting a meal of “belt fried meat”, the biggest feeling in addition to the pain on the butt, is the pleasure of disassembly analysis; If you can reassemble it with no more than a few parts, in addition to avoiding a fat beating, the sense of accomplishment is also overflowing;

The big widgets in FLutter are also a combination of small widgets. According to them: Everything is a Widget

So today I want to see, how deep are you, full of positive energy, can you frighten?

Apart to

As a childhood demolition of the senior home engineer, on how to dismantle machinery and appliances is also have their own experience:

For example, the junior home demolition engineer, the first thing to get a small household appliance, is on the screwdriver on the hammer violence dismantling; According to personal experience, this kind of disassembly method, the end result is usually one to three days can only sleep on the stomach;

And like me this kind of senior level, get unfamiliar small household appliances, the first thing is to analyze the structure, looking for can use the place;

Hopefully, Flutter provides an X-ray tool that allows us to see the structure of the ListView intuitively. DevTools will show you the structure of the ListView. The structure of the initial Flutter Widget is not complex, but has only a few layers.

Well, although there is a “billion dots” gap with my expectation; But the problem is not big, write more hydrology, no big deal;

Then the following combined with the source code, began to work

Simple analysis

To summarize, the Widget tree of the listView looks like this, just from the devTool DetailTree diagram above:

ListView ➡ PrimaryScrollController ➡ Scrollable ➡ GlowingOverscrollIndicator ➡ NotificationListener < ScrollNotification > ➡ RepaintBoundary bearable CustomPaint bearable _ScrollableScope bearable Listener: RawGestureDetector trial Gesturesemantics trial Listener trial com/com/viewport trial SliverPadding trial MediaQuery trial SliverList

In addition to the ListView itself, he adds something extra to each item:

KeyedSubtree trial AutomaticKeepAlive trial KeepAlive trial NotificationListener trial IndexedSemantics trial RepaintBoundary

Combined with the comments in the source code and my authentic English, we can make a basic guess about the functionality of each widget:

  1. PrimaryScrollController: The basic controller used to control the ListView, including the scroll position;
  2. Scrollable : A widget that scrolls. Basically, it’s a composite widget that slides
  3. Excessive GlowingOverscrollIndicator: provide the scrolling effect
  4. NotificationListener: The distribution listener _ScrollSemantics for various events
  5. RepaintBoundary: In this and all subsequent RepaintBoundary, there is only one function, to prevent too many useless redraws
  6. CustomPaint: remember that GlowingOverscrollIndicator above? Can you guess who drew that hint effect in OverScroll?
  7. _ScrollSemantics: Does not need to be used if the semantics are not commented in… Combine SemanticsNode to add semantic data to some places. What is semantic data??
  8. _ScrollableScope: [InheritedWidget] [InheritedWidget] [InheritedWidget] [InheritedWidget]
  9. Listener: a widget that provides a touch gesture callback
  10. A RawGestureDetector is a classic gesture Listener
  11. _GestureSemantics: Use this widget if you need to exclude some extra gestures
  12. Semantics: Used to add Semantics to the widget tree, to read comments, as if for debugging purposes, such as devTool
  13. IgnorePointer: This one is familiar, the interceptor for touch events
  14. Viewport: Displays widgets in visual range
  15. SliverPadding: A Padding widget dedicated to the sliding widget type
  16. MediaQuery: InheritedWidget, which is the same as _ScrollableScope, but uses generic media information. Is it the visible area??) Such as window size;
  17. SliverList: equivalent to the ListView base ontology?

In the Item section, the combined Widget looks like this:

  1. KeyedSubtree: it is like adding a Key to the Item. The default value of this Key is index. I don’t know. We’ll see later
  2. AutomaticKeepAlive: To be clear, caching items seems to have something to do with reuse?
  3. KeepAlive: the same effect as the one above. The difference is that this one marks what needs to be kept alive.
  4. IndexedSemantics [KeyedSubtree] Index semantics [KeyedSubtree]

To tidy things up, we’ll take a look at these widgets below

  1. PrimaryScrollController (controller, which is definitely involved in the overall process)
  2. Scrollable (sliding body)
  3. _ScrollableScope (see what data is stored inside)
  4. Viewport (Viewport must be the relevant part)
  5. SliverList (list ontology)

The item of this:

  1. KeyedSubtree
  2. KeepAlive (possibly involving reuse?)
  3. IndexedSemantics (What does this index save do?

Catalog done. Let’s go