最近一個(gè)項(xiàng)目要實(shí)現(xiàn)可以無限循環(huán)的PageView，主要思路是在初始化pageview的list的時(shí)候在開始和結(jié)尾多加一個(gè)結(jié)尾和開頭的widget，當(dāng)滑動(dòng)到開頭和結(jié)尾的時(shí)候手動(dòng)進(jìn)行頁面的切換，詳細(xì)可以搜索pageview無限輪播。
發(fā)展壯大離不開廣大客戶長(zhǎng)期以來的信賴與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及成都咖啡廳設(shè)計(jì)等，在成都網(wǎng)站建設(shè)、成都營(yíng)銷網(wǎng)站建設(shè)、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。
這種方法有一個(gè)要點(diǎn)就是要維護(hù)兩個(gè)索引，一個(gè)是內(nèi)部list的索引，一個(gè)是外部顯示的索引，由于list的容量是比顯示的數(shù)量多2的，所以如果要在外部進(jìn)行一些比如指示器或者計(jì)時(shí)器功能要進(jìn)行和頁面同步顯示或者切換頁面操作時(shí)，需要將顯示的索引轉(zhuǎn)換成list的索引。
不過網(wǎng)上說的都是一些比較簡(jiǎn)單的實(shí)現(xiàn)，看到比較多的就是當(dāng)滑動(dòng)到要手動(dòng)切換的時(shí)候進(jìn)行一個(gè)時(shí)延，這樣可以避免直接切換頁面造成的卡頓和跳動(dòng)現(xiàn)象。但是存在一個(gè)問題，如果要同時(shí)實(shí)現(xiàn)一個(gè)跟隨頁面切換的指示器，就會(huì)出現(xiàn)當(dāng)頁面切換過去之后指示器才會(huì)跟著過去，因?yàn)轫撁媲袚Q的時(shí)候執(zhí)行了時(shí)延，而時(shí)延之后才會(huì)真正改變索引，此時(shí)才會(huì)setstate，之后指示器才能響應(yīng)到索引的切換，但是如果在時(shí)延之前就切換的話又會(huì)出現(xiàn)指示器先行的情況。因此這種方法其實(shí)是存在一些問題的。
所以解決這個(gè)問題的關(guān)鍵在于如何進(jìn)行頁面切換的判斷。這里可以有兩種思路實(shí)現(xiàn)，第一種是實(shí)現(xiàn)viewpage的onpagechanged方法，在里面進(jìn)行邏輯的判斷，然后用controller來進(jìn)行頁面跳轉(zhuǎn)，不過這種方法存在當(dāng)controller跳轉(zhuǎn)的時(shí)候又會(huì)回調(diào)onpagechanged，所以就會(huì)出現(xiàn)多次對(duì)索引不必要操作，而且如果有比如計(jì)時(shí)器等額外的功能的話可能不方便將頁面邏輯分開，而且依舊無法解決指示器延遲問題，同時(shí)也很難進(jìn)行細(xì)粒度的操作。
第二種方法我們就要去看pageview的源碼了，從源碼的角度來解決問題才是正確的方法。首先我們點(diǎn)進(jìn)去pageview的源碼
看到這里其實(shí)已經(jīng)有一些思路了，我們之前難點(diǎn)在于重寫了onpagechanged方法導(dǎo)致問題無法很好的解決，現(xiàn)在我們找到了onpagechanged調(diào)用的地方，只要找辦法避免掉就可以實(shí)現(xiàn)了。
當(dāng)然這里我們要說到NotificationListener，以及flutter對(duì)應(yīng)的冒泡事件傳輸機(jī)制，這里大家可以去看看這篇 文章 。
我來總結(jié)一下，其實(shí)就是flutter對(duì)于notification這個(gè)組件，有一中事件規(guī)則叫冒泡傳遞，底層的notification如果在它的 onNotification寫的邏輯中返回是false以及它不是根結(jié)點(diǎn)，就會(huì)去向上遍歷尋找它的祖先notification組件，知道遇到root節(jié)點(diǎn)或者某一個(gè)返回true，則事件傳遞結(jié)束。
而且在onNotification中可以對(duì)多種事件進(jìn)行監(jiān)聽和處理，所以我們可以把對(duì)viewpage頁面跳轉(zhuǎn)對(duì)索引處理的邏輯寫在這里，而且我們可以分別處理比如滑動(dòng)開始的start事件和結(jié)束的end事件，分別進(jìn)行細(xì)粒度的邏輯的處理，這樣就可以在外部進(jìn)行操作和別的功能實(shí)現(xiàn)了。
因此不僅無限輪播事件可以通過這種方法來解決，如果有其他的操作也可以這樣進(jìn)行處理，而且因?yàn)槲覀儧]有傳入onpagechanged方法，所以不存在多次調(diào)用的問題，pageview那里判斷onpagechanged是null方法就不會(huì)進(jìn)去了，會(huì)直接我們寫在pageview外面的notification的邏輯。
最后的結(jié)構(gòu)大概這樣
對(duì)動(dòng)畫系統(tǒng)而言，為了實(shí)現(xiàn)動(dòng)畫，它需要做三件事兒：1.確定畫面變化的規(guī)律；2.根據(jù)這個(gè)規(guī)律，設(shè)定動(dòng)畫周期，啟動(dòng)動(dòng)畫；3.定期獲取當(dāng)前動(dòng)畫的值，不斷地微調(diào)、重繪畫面。
這三件事情對(duì)應(yīng)到 Flutter 中，就是 Animation、AnimationController 與 Listener：
1.Animation 是 Flutter 動(dòng)畫庫中的核心類，會(huì)根據(jù)預(yù)定規(guī)則，在單位時(shí)間內(nèi)持續(xù)輸出動(dòng)畫的當(dāng)前狀態(tài)。Animation 知道當(dāng)前動(dòng)畫的狀態(tài)（比如，動(dòng)畫是否開始、停止、前進(jìn)或者后退，以及動(dòng)畫的當(dāng)前值），但卻不知道這些狀態(tài)究竟應(yīng)用在哪個(gè)組件對(duì)象上。換句話說，Animation 僅僅是用來提供動(dòng)畫數(shù)據(jù)，而不負(fù)責(zé)動(dòng)畫的渲染。
2.AnimationController 用于管理 Animation，可以用來設(shè)置動(dòng)畫的時(shí)長(zhǎng)、啟動(dòng)動(dòng)畫、暫停動(dòng)畫、反轉(zhuǎn)動(dòng)畫等。
3.Listener 是 Animation 的回調(diào)函數(shù)，用來監(jiān)聽動(dòng)畫的進(jìn)度變化，我們需要在這個(gè)回調(diào)函數(shù)中，根據(jù)動(dòng)畫的當(dāng)前值重新渲染組件，實(shí)現(xiàn)動(dòng)畫的渲染。
class NormalAnimateWidget extends StatefulWidget {
@override
StatecreateState()=_NormalAnimateState();
}
class _NormalAnimateState extends Statewith SingleTickerProviderStateMixin{
AnimationController?controller;
Animation?animation;
@override
void initState() {
// TODO: implement initState
super.initState();
/*
* AnimationController
AnimationController用于控制動(dòng)畫，它包含動(dòng)畫的啟動(dòng)forward()、停止stop() 、反向播放 reverse()等方法。
* AnimationController會(huì)在動(dòng)畫的每一幀，就會(huì)生成一個(gè)新的值。
* 默認(rèn)情況下，AnimationController在給定的時(shí)間段內(nèi)線性的生成從 0.0 到1.0（默認(rèn)區(qū)間）的數(shù)字。
* */
/*Ticker
當(dāng)創(chuàng)建一個(gè)AnimationController時(shí)，需要傳遞一個(gè)vsync參數(shù)，
它接收一個(gè)TickerProvider類型的對(duì)象，它的主要職責(zé)是創(chuàng)建Ticker，定義如下：
abstract class TickerProvider {
//通過一個(gè)回調(diào)創(chuàng)建一個(gè)Ticker
Ticker createTicker(TickerCallback onTick);
}
Flutter 應(yīng)用在啟動(dòng)時(shí)都會(huì)綁定一個(gè)SchedulerBinding，
通過SchedulerBinding可以給每一次屏幕刷新添加回調(diào)，
而Ticker就是通過SchedulerBinding來添加屏幕刷新回調(diào)，這樣一來，
每次屏幕刷新都會(huì)調(diào)用TickerCallback。
使用Ticker(而不是Timer)來驅(qū)動(dòng)動(dòng)畫會(huì)防止屏幕外動(dòng)畫（動(dòng)畫的UI不在當(dāng)前屏幕時(shí)，如鎖屏?xí)r）
消耗不必要的資源，因?yàn)镕lutter中屏幕刷新時(shí)會(huì)通知到綁定的SchedulerBinding，
而Ticker是受SchedulerBinding驅(qū)動(dòng)的，
由于鎖屏后屏幕會(huì)停止刷新，所以Ticker就不會(huì)再觸發(fā)。
*/
// 創(chuàng)建動(dòng)畫周期為1秒的AnimationController對(duì)象
controller =AnimationController(
vsync:this, duration:const Duration(milliseconds:3000));
/*
* Curve
* 動(dòng)畫過程可以是勻速的、勻加速的或者先加速后減速等。
* Flutter中通過Curve（曲線）來描述動(dòng)畫過程，
* 我們把勻速動(dòng)畫稱為線性的(Curves.linear)，而非勻速動(dòng)畫稱為非線性的。
* 我們可以通過CurvedAnimation來指定動(dòng)畫的曲線，如：
final CurvedAnimation curve =
CurvedAnimation(parent: controller, curve: Curves.easeIn);
*
Curves曲線 動(dòng)畫過程
linear 勻速的
decelerate 勻減速
ease 開始加速，后面減速
easeIn 開始慢，后面快
easeOut? 開始快，后面慢
easeInOut? 開始慢，然后加速，最后再減速
*
* 當(dāng)然我們也可以創(chuàng)建自己Curve，例如我們定義一個(gè)正弦曲線：
class ShakeCurve extends Curve {
@override
double transform(double t) {
return math.sin(t * math.PI * 2);
}
}
* */
final CurvedAnimation curve =CurvedAnimation(
parent:controller!, curve:Curves.linear);
/*
* Animation
*Animation是一個(gè)抽象類，它本身和UI渲染沒有任何關(guān)系，
* 而它主要的功能是保存動(dòng)畫的插值和狀態(tài)；其中一個(gè)比較常用的Animation類是Animation。
* Animation對(duì)象是一個(gè)在一段時(shí)間內(nèi)依次生成一個(gè)區(qū)間(Tween)之間值的類。
* Animation對(duì)象在整個(gè)動(dòng)畫執(zhí)行過程中輸出的值可以是線性的、曲線的、一個(gè)步進(jìn)函數(shù)或者任何其他曲線函數(shù)等等，
* 這由Curve來決定。 根據(jù)Animation對(duì)象的控制方式，
* 動(dòng)畫可以正向運(yùn)行（從起始狀態(tài)開始，到終止?fàn)顟B(tài)結(jié)束），
* 也可以反向運(yùn)行，甚至可以在中間切換方向。
* Animation還可以生成除double之外的其他類型值
* ，如：Animation 或Animation。
* 在動(dòng)畫的每一幀中，我們可以通過Animation對(duì)象的value屬性獲取動(dòng)畫的當(dāng)前狀態(tài)值。
#動(dòng)畫通知
我們可以通過Animation來監(jiān)聽動(dòng)畫每一幀以及執(zhí)行狀態(tài)的變化，Animation有如下兩個(gè)方法：
addListener()；它可以用于給Animation添加幀監(jiān)聽器，
* 在每一幀都會(huì)被調(diào)用。
* 幀監(jiān)聽器中最常見的行為是改變狀態(tài)后調(diào)用setState()來觸發(fā)UI重建。
addStatusListener()；
* 它可以給Animation添加“動(dòng)畫狀態(tài)改變”監(jiān)聽器；
* 動(dòng)畫開始、結(jié)束、正向或反向（見AnimationStatus定義）時(shí)會(huì)調(diào)用狀態(tài)改變的監(jiān)聽器。
* */
// 創(chuàng)建從50到200線性變化的Animation對(duì)象
// 普通動(dòng)畫需要手動(dòng)監(jiān)聽動(dòng)畫狀態(tài)，刷新UI
animation =Tween(begin:10.0, end:200.0).animate(curve)
..addListener(()=setState((){}));
/*
* Tween
* 默認(rèn)情況下，AnimationController對(duì)象值的范圍是[0.0，1.0]。
* 如果我們需要構(gòu)建UI的動(dòng)畫值在不同的范圍或不同的數(shù)據(jù)類型，
* 則可以使用Tween來添加映射以生成不同的范圍或數(shù)據(jù)類型的值。
*Tween構(gòu)造函數(shù)需要begin和end兩個(gè)參數(shù)。
* Tween的唯一職責(zé)就是定義從輸入范圍到輸出范圍的映射。
* 輸入范圍通常為[0.0，1.0]，但這不是必須的，我們可以自定義需要的范圍。
* */
// 啟動(dòng)動(dòng)畫
controller!.repeat(reverse:true);
//
// 第二段
// animation!.addStatusListener((status) {
//? if (status == AnimationStatus.completed) {
//? ? controller!.reverse();// 動(dòng)畫結(jié)束時(shí)反向執(zhí)行
//? } else if (status == AnimationStatus.dismissed) {
//? ? controller!.forward();// 動(dòng)畫反向執(zhí)行完畢時(shí)，重新執(zhí)行
//? }
// });
// controller!.forward();// 啟動(dòng)動(dòng)畫
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
body:Center(
child:Container(
width:animation!.value,// 將動(dòng)畫的值賦給 widget 的寬高
? ? ? ? ? ? ? height:animation!.value,//
? ? ? ? ? ? ? child:FlutterLogo(),
)
)
)
);
}
@override
void dispose() {
// 釋放資源
controller!.dispose();
super.dispose();
}
}
同上篇文章《九、Flutter水波動(dòng)畫》畫水波原理是一樣的，都是通過畫筆呈現(xiàn)不規(guī)則圖形。this.offsetList是存儲(chǔ)加載的動(dòng)畫里面的實(shí)心圓的坐標(biāo)，通過drawCircle方法把坐標(biāo)畫到畫布上。
RoundProgress繼承StatefulWidget通過 Timer刷新頁面，來達(dá)到動(dòng)畫的效果。this.w * i / this.numOfMoveView是計(jì)算每個(gè)實(shí)心圓的寬度的，i越小實(shí)心圓的寬度越小，實(shí)心圓就越小。(pi * 2.0 / this.numOfMoveView) * i計(jì)算出弧度，通過弧度計(jì)算出每個(gè)實(shí)心圓的坐標(biāo)，保存在this.offsetList里。每個(gè)實(shí)心圓初始化的弧度都保存在了 this.radianList里，循環(huán)第二次，第三次......累計(jì)弧度，每個(gè)實(shí)心圓的坐標(biāo)逐一按弧度偏移，從而所有的實(shí)心圓繞著一個(gè)點(diǎn)旋轉(zhuǎn)。
RoundProgress最重的一個(gè)參數(shù)loading，當(dāng)loading = true加載動(dòng)畫會(huì)在stack里面呈現(xiàn)出來，當(dāng)loading = false加載動(dòng)畫不會(huì)出現(xiàn)在stack里面。
由于RoundProgress繼承了StatefulWidget，從外部就沒有辦法更新RoundProgress數(shù)據(jù)了，可以通過組件間通信。這里使用的是Global Key通信，可以訪問State對(duì)象的公共屬性和方法，從而讓加載動(dòng)畫停止旋轉(zhuǎn)，刷新組件。另外還有一種通信方法是ValueNotifier通信，ValueNotifier是一個(gè)包含單個(gè)值的變更通知器，當(dāng)它的值改變的時(shí)候，會(huì)通知它的監(jiān)聽。
總結(jié)：這個(gè)加載動(dòng)畫算是初步完成了，基本使用還是可以的，封裝的不夠靈活，可自定義程度比較低。下一篇文章將進(jìn)一步對(duì)加載動(dòng)畫優(yōu)化，并上傳到pub.dev方便大家使用。謝謝收看，點(diǎn)個(gè)贊吧！
對(duì)于滾動(dòng)的視圖，我們經(jīng)常需要監(jiān)聽它的一些滾動(dòng)事件，在監(jiān)聽到的時(shí)候去做對(duì)應(yīng)的一些事情。
比如視圖滾動(dòng)到底部時(shí)，我們可能希望做上拉加載更多；
比如滾動(dòng)到一定位置時(shí)顯示一個(gè)回到頂部的按鈕，點(diǎn)擊回到頂部的按鈕，回到頂部；
比如監(jiān)聽滾動(dòng)什么時(shí)候開始，什么時(shí)候結(jié)束；
在Flutter中監(jiān)聽滾動(dòng)相關(guān)的內(nèi)容由兩部分組成：ScrollController和ScrollNotification。
ScrollController
在Flutter中，Widget并不是最終渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常這種監(jiān)聽事件以及相關(guān)的信息并不能直接從Widget中獲取，而是必須通過對(duì)應(yīng)的Widget的Controller來實(shí)現(xiàn)。
ListView、GridView的組件控制器是ScrollController，我們可以通過它來獲取視圖的滾動(dòng)信息，并且可以調(diào)用里面的方法來更新視圖的滾動(dòng)位置。
另外，通常情況下，我們會(huì)根據(jù)滾動(dòng)的位置來改變一些Widget的狀態(tài)信息，所以ScrollController通常會(huì)和StatefulWidget一起來使用，并且會(huì)在其中控制它的初始化、監(jiān)聽、銷毀等事件。
我們來做一個(gè)案例，當(dāng)滾動(dòng)到1000位置的時(shí)候，顯示一個(gè)回到頂部的按鈕：
jumpTo(double offset)、animateTo(double offset,...)：這兩個(gè)方法用于跳轉(zhuǎn)到指定的位置，它們不同之處在于，后者在跳轉(zhuǎn)時(shí)會(huì)執(zhí)行一個(gè)動(dòng)畫，而前者不會(huì)。
ScrollController間接繼承自Listenable，我們可以根據(jù)ScrollController來監(jiān)聽滾動(dòng)事件。
在移動(dòng)端，各個(gè)平臺(tái)或 UI 系統(tǒng)的原始指針事件模型基本都是一致，即：一次完整的事件分為三個(gè)階段：手指按下、手指移動(dòng)、和手指抬起，而更高級(jí)別的手勢(shì)（如點(diǎn)擊、雙擊、拖動(dòng)等）都是基于這些原始事件的。
Flutter 中可以使用 Listener widget 來監(jiān)聽原始觸摸事件，它也是一個(gè)功能性 widget。
Listener 的常見屬性
用法如下：
加載更多需要對(duì) ListView 進(jìn)行監(jiān)聽，所以需要進(jìn)行監(jiān)聽器的設(shè)置，在 State 中進(jìn)行監(jiān)聽器的初始化。
2、使用上述的 Listener 來監(jiān)聽，通過 Listener 的 onPointerMove（手指在屏幕上滑動(dòng)）來監(jiān)聽滑動(dòng)的距離，當(dāng)滑動(dòng)到底部時(shí)加載更多數(shù)據(jù)
Flutter的 StatefulWidget StatelessWidget 生命周期中沒有組件出現(xiàn)或者消失的回調(diào)，主要是要靠路由的監(jiān)聽
重慶分公司
重慶分公司
