Create a nested slide PageView with Flutter from scratch

preface

Now that we’ve done nested sliding, how do we add animation to it

First things to know (Preparation before class)

1. The animation part of Flutter is actually physics, but how does physics set up and apply animation effects to pageView for display? The part to know at this point is ScrolActivity.
2. The touch events in Flutter can be divided into dragStrat, dragDown, etc., but we do not see any related touch events in NestedScrollerView. Actually, Flutter has basically processed the touch events and converted them into effects. The part we need to understand at this point is the drag,hold and goIdel,goBallistic and so on.

Unify all events to a manager for distribution

Nested slides in the NestedScrollerView are managed by the _NestedScrollCoordinator, which should be the most direct way to coordinate the current body and header

So do what _NestedScrollCoordinator does in NestedScrollerView, create a class that inherits ScrollActivityDelegate and ScrollHoldController, In addition, the method of position is modified, and the methods such as drag and hold that need to be coordinated are handed over to this new class.

Unlike NestedScrollerView, nested slider priorities should respond first to the control that receives the event first. For example, if I receive a child Page slide event first, the external pageView should not respond until it can’t slide or the event is processed. Instead of the way NestedScrollerView determines the priority based on the sliding direction.

In order to achieve the above point, we can add the inner flag to position, and then determine whether the position triggered by the drag method is a child Page or a parent Page based on the inner flag passed in.

When overScroll, transfer the child PageView events to the parent Page

In the applyUserOffset method, determine whether the position of the child Page, its pixels plus the sliding distance is greater than maxScrollExtent. Use this method to determine whether the child Page is overScroll, and distribute events to the child Page or parent Page based on the results

In the goBallistic method, I’m determining whether the child Page will overScroll based on the sliding direction.

Of course, don’t forget to add the inner tag to the handle

Look Look effect

Afterword.

Now we’ve solved the problem of nesting animation, basically dealing with goBallistic and Activity; Then the following problems still need to be solved:

1. Continuous fast sliding (very fast sliding, occasionally the sub-page does not slide to the bottom) (Well, this is a low-level bug… Resolved)
2. New bug in 2020.3.11If there are two pageViews at the same level in the View tree (for example: If you put a PageView in the red detail page, then the newly added PageView is the same as the PageView in the page with BottomNavigationbar, which is the sublayout of the main PageView. Position grabs the bound ScrollerConttroller…(Solution idea is also relatively simple, used to be at the top of the parent pageView calculation, and control the child pageView, then the idea reference from NestedScrollerView…… But if calculated by sub PageView, then through PrimaryScrollerController access to the parent PageView controller is not just a matter of… A View may have multiple child views, but there must be only one parent View… PS: It seems that this can be integrated into a nesting function, the next article to supplement the overall design)