This is the 8th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.

preface

With the end of the child component ListView series, component series ushered in the beginning, from the beginning of this I will record the implementation of custom ListView process, their own thinking and implementation; It is also convenient to arrange the code ~ later

So let’s start with the control sliding mode:

Program selection – sliding effect control

First look at the desired sliding effect:

  1. The simulation page

In this mode, no sliding effects are required; The only thing to do is list items from top to bottom;

  1. Cover page

In overlay page-turning mode, based on the above simulation page-turning effect, only the sliding effect is applied to the current top visible page;

  1. scrolling

The scrolling effect is no different from the ListView itself;

To sum up:

  • In the first mode, the change of position is triggered only when a page is turned over.
  • In the second mode, the position change is equivalent to the current ListView, but applies only to the first visible page;
  • In the third mode, it is equivalent to ListView and requires no processing;

Now specific analysis and design:

In the last article, I proposed three ways to control the sliding effect:

  • Custom ScrollerController;
  • Custom ViewPort;
  • Custom SliverList;

In the ListView, the ScrollController is responsible for controlling the ScrollPosition; ViewPort handles the display area; SliverLit is responsible for loading and drawing content, and the relationship between the three is a call from the top to the bottom;

The superior can call the subordinate, but the three are not really related. For example, the ScrollController only cares about its Positiion, SliverList, and doesn’t care about its contents. In other words, The ScrollController does not know the presentation details of the SliverList unless it is provided in the ScrollPosition;

In this case, the ScrollController has no way of knowing the display status of the SliverList; In the same way, it is impossible to distinguish the page on which the current position is on or the offset of pixels only by changing the position. The SliverList is a meaningful place to make the Pixels in position effective.

So the way to change it, it should be a custom SliverList;

Specific implementation methods:

Let’s change the RenderObject layer of the SliverList:

I rewrote the RenderSliverList paint method to draw a Child in the original SliverList:

As you can see, the paint method is where the child position is actually computed, starting with the childMainAxisPosition method:

The position of the main axis is calculated based on the layoutOffset parameter set to the parentData of the previous layout method, traversing the Child and subtracting the current sliding distance.

If you cross the axis, you just return 0

The relative positions are calculated and passed to the paint method.

Then it gets the next child and loops the process again;

And if you want to achieve the above effect, the things to do are relatively simple:

  • If effect 1, always change the drawing position of all children to 0;
  • For effect 2, simply add the scrollOffset offset to the first child;

Of course, because of the drawing order, we get the child first from lastChild and keep fetching the previous child until the first one;

If you combine that with the ability to customize paths and change items, you introduce the ability to imagine LayoutManager.

This part of the logic is extracted and used by LayoutManager calls.

Conclusion:

This slide effect is very simple to implement, but the trouble is how to attach the custom SliverList

The next step is to modify the Element layer by exposing the Layout and paint methods of the RenderObject