After procrastinating for several days, the "picture carousel" effect is finally realized. Are you very excited?
I studied it a few days ago Timer, PageViewdo you still have any impressions? If not, you can go back and have a look.
Let's first look at the effect animation
It is on PageViewthe basis of the previous one that the automatic rotation effect is added.
So, without further ado, let's get started.
1. Prepare the data source
It's very simple, prepare 5 pictures and steal them from Xiaomi's official website
Notice that, in addition to declaring 5 pictures, a list realImgsof . His role is very important and determines the user experience.
这样做的目的是，「欺骗视觉」
Add "real last picture" at the first position; add "real first picture" at the last position, so that "real picture length" becomes "real picture length + 2. In this way, just slide the
pageview When sliding to the "last piece of the real array", the "first element of the expanded array" will be displayed forcibly;
when manually sliding to the "first piece of the real array", the "last element of the expanded array" will be displayed forcibly element".
In this way, the effect of "circular rotation" comes out.
2. Prepare a single page layout
It's very simple, just paste the code directly, note that I deliberately use Text to mark the index of the real picture, so as to understand the principle of "loop rotation"
3. Define the cyclic Timer
Don't read the notes first, if you have doubts, read the notes
Fourth, prepare the necessary attributes in PageView
child control
sliding effect
controller
Page switching monitoring
scroll direction
Then because you still need to scroll to monitor, you need to prepare notifications
notify
Finally, wrap the PageView we created with NotificationListener, like this
//创建类viewpager
Widget Pager(constraints, callback) {
return new NotificationListener(
child: new PageView.custom(....
5. In this way, under the impetus of the Timer in the initial initState, PageView will start to rotate in a loop, and then under the combined action of PageView's page monitoring and notification, it will create the illusion of 'infinite rotation' .
Bingo! in conclusion.
TimerPageViewPageControllerNotificationListenerPageScrollPhysics