Shulou(Shulou.com)06/03 Report--

This article will explain in detail the implementation of Flutter rolling monitoring and practical appBar rolling gradient. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Introduction

Generally speaking, scrolling monitoring in Flutter can be implemented in two ways: ScrollController and NotificationListener.

ScrollController introduction

ScrollController

Introduce the common properties and methods of ScrollController:

Offset: the current scrolling position of the scrollable component. JumpTo (double offset) jumps to the specified location, and offset is the roll offset. AnimateTo (double offset,@required Duration duration,@required Curve curve) is the same as jumpTo (double offset), except that when animateTo jumps, it executes an animation, passing in the time and animation curve needed to perform the animation.

ScrollPosition

ScrollPosition is used to save the scrolling position of scrollable components. A ScrollController object may be used by multiple scrollable components

ScrollController creates a ScrollPosition object for each scrolling component to store location information. What is stored in ScrollPosition is in the positions property of ScrollController, which is an array of List. What really holds the location information in ScrollController is ScrollPosition, and offset is just a convenient attribute. If you look at the source code, you can see that the offset acquisition is obtained from ScrollPosition.

/ Returns the attached [ScrollPosition], from which the actual scroll offset / of the [ScrollView] can be obtained. / Calling this is only valid when only a single position is attached. ScrollPosition get position {assert (_ positions.isNotEmpty, 'ScrollController not attached to any scroll views.'); assert (_ positions.length = = 1,' ScrollController attached to multiple scroll views.'); return _ positions.single;} / The current scroll offset of the scrollable widget. / Requires the controller to be controlling exactly one scrollable widget. Double get offset = > position.pixels

Although a ScrollController can correspond to multiple scrollable components, reading the scrolling position offset requires one-to-one reading. In the case of one-to-many, we can use other methods to read the scroll position. Assuming that a ScrollController now corresponds to two scrollable components, you can get the ScrollPosition through position.elementAt (index) to get the offset:

Controller.positions.elementAt (0) .pixels controller.positions.elementAt (1) .pixels

ScrollPosition's method

There are two common methods in ScrollPosition: animateTo () and jumpTo (), which are the ones that really control the jump to the scroll position. Both methods of the same name in ScrollController end up calling ScrollPosition internally.

Future animateTo (double offset, {@ required Duration duration, @ required Curve curve,}) {assert (_ positions.isNotEmpty, 'ScrollController not attached to any scroll views.'); final List animations = List (_ positions.length); for (int I = 0; I

< _positions.length; i += 1) // 调用 ScrollPosition 中的 animateTo 方法 animations[i] = _positions[i].animateTo(offset, duration: duration, curve: curve); return Future.wait(animations).then((List _) =>

Null);}

ScrollController control principle

There are three other important methods for ScrollController:

1. CreateScrollPosition: when ScrollController is associated with a scrollable component, the scrollable component first calls the createScrollPosition method of ScrollController to create a ScrollPosition to store scrolling position information.

ScrollPosition createScrollPosition (ScrollPhysics physics, ScrollContext context, ScrollPosition oldPosition)

2. After the scrolling component calls the createScrollPosition method, the attach method is then called to add the ScrollPosition information of the creation number to the positions property. This step is called "registration location". Only after registration, animateTo () and jumpTo () can be called.

Void attach (ScrollPosition position)

3. Finally, when the scrollable component is destroyed, the detach () method will be called to remove its ScrollPosition object from the positions property of ScrollController. This step is called "logout location". After logging out, animateTo () and jumpTo () will no longer be called.

Void detach (ScrollPosition position)

NotificationListener introduction

Notice bubbling

The sub-Widget of the Flutter Widget tree can communicate with the parent (including ancestor) Widget by sending a notification (Notification). The parent component can listen to the notifications of its own concerns through the NotificationListener component, which is similar to the event bubbling of browsers in Web development. The term "bubbling" is still used in Flutter, which is called notification bubbling.

Notification bubbling is similar to user touch event bubbling, but with one difference: notification bubbling can be stopped, but user touch event is not.

Scrolling notification

Notifications are used in many places in Flutter, such as scrolling notifications (ScrollNotification) when scrollable components (Scrollable Widget) slide, and Scrollbar determines the location of scrollbars by listening on ScrollNotification.

Switch (notification.runtimeType) {case ScrollStartNotification: print ("start scrolling"); break; case ScrollUpdateNotification: print ("scrolling"); break; case ScrollEndNotification: print ("scroll stop"); break; case OverscrollNotification: print ("scroll to boundary"); break;}

ScrollStartNotification and ScrollUpdateNotification all inherit the ScrollNotification class, and different types of notification subclasses contain different information. ScrollUpdateNotification has a scrollDelta property, which records the displacement of the movement.

When NotificationListener inherits the amount of the StatelessWidget class, we can directly place it in the number of Widget. You can specify a template parameter through the onNotification in it. The template parameter type must be inherited from Notification. You can explicitly specify the template parameter, such as scrolling end notification:

NotificationListener

At this point, NotificationListener will only receive notifications of this parameter type.

The onNotification callback handles the notification callback, and its return value is of Boolean type (bool). When the return value is true, bubbling is prevented, and the parent Widget will no longer receive the notification; when the return value is false, the notification continues to bubble up.

The difference between the two

First of all, both of these two ways can be used to monitor scrolling, but there are still some differences:

ScrollController can control the scrolling of scrolling controls, while NotificationListener cannot. With NotificationListener, you can listen anywhere from the scrollable component to the root of the widget tree, while the ScrollController can only be associated with a specific scrollable component. The information obtained after receiving the scrolling event is different; when NotificationListener receives the scrolling event, the notification will carry some information about the current scrolling position and ViewPort, while ScrollController can only get the current scrolling position. ScrollController instance effect diagram

Code implementation steps

Create an interface for scrolling, a cascading widget for a Stack inside a Scaffold component body, with a listview inside, and a custom appBar;floatingActionButton with a hover button to return to the top.

Scaffold (body: Stack (children: [MediaQuery.removePadding (removeTop: true, context: context, child: ListView.builder) (/ / ScrollController associated scrolling components controller: _ controller, itemCount: 100, itemBuilder: (context, index) {if (index = = 0) {return Container (height: 200,child: Swiper (itemBuilder: (BuildContext context, int index) {return new Image.network ("http://via.placeholder.com/350x150", fit: BoxFit.fill,)) }, itemCount: 3, autoplay: true, pagination: new SwiperPagination (),);} return ListTile (title: Text ("ListTile:$index"),) },), Opacity (opacity: toolbarOpacity, child: Container (height: 98, color: Colors.blue, child: Padding (padding: const EdgeInsets.only (top: 30.0), child: Center (child: Text ("ScrollerDemo", style: TextStyle (color: Colors.white, fontSize: 20.0)],), floatingActionButton:! showToTopBtn? Null: FloatingActionButton (child: Icon (Icons.keyboard_arrow_up), onPressed: () {_ controller.animateTo (0.0, duration: Duration (milliseconds: 500), curve: Curves.ease);},),)

Create a ScrollController object, add listening for scrolling in the initialization, and associate it with the scrollable widget ListView:

Double t = _ controller.offset / DEFAULT_SCROLLER; if (t

< 0.0) { t = 0.0; } else if (t >

1.0) {t = 1.0;} setState (() {toolbarOpacity = t;})

Add relevant business codes to _ controller.addListener, calculate the transparency according to the scrolling offset, and realize the appBar scrolling gradient:

If (_ controller.offset

< DEFAULT_SHOW_TOP_BTN && showToTopBtn){ setState(() { showToTopBtn = false;});}else if(_controller.offset >

= DEFAULT_SHOW_TOP_BTN & &! showToTopBtn) {setState () {showToTopBtn = true;});}

More scrolling height and current floatingActionButton reality, to determine whether the floatingActionButton needs to be displayed:

If (_ controller.offset

< DEFAULT_SHOW_TOP_BTN && showToTopBtn){ setState(() { showToTopBtn = false;});}else if(_controller.offset >

= DEFAULT_SHOW_TOP_BTN & &! showToTopBtn) {setState () {showToTopBtn = true;});}

Click floatingActionButton to return to the top:

_ controller.animateTo (0.0, duration: Duration (milliseconds: 500), curve: Curves.ease)

Please refer to the / demo/scroller_demo.dart file in the GitHub project below for the complete code.

NotificationListener instance

Effect picture

Code implementation steps

In a NotificationListener instance, the layout is basically the same as that of ScrollController, except that the ListView needs to be wrapped in NotificationListener as a child, and then NotificationListener determines the scroll offset in onNotification:

If (notification is ScrollUpdateNotification & & notification.depth = 0) {double t = notification.metrics.pixels / DEFAULT_SCROLLER; if (t

< 0.0) { t = 0.0; } else if (t >

SetState (() {toolbarOpacity = t;}); print (notification.metrics.pixels); / / print scrolling position}

This is the end of the implementation of Flutter rolling monitoring and practical appBar rolling gradient. I hope the above content can be helpful to everyone and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.