建站
咨詢
售后
建站咨詢
新聞中心
flutter如何自定義一個controller
最近在寫一個flutter-ui庫，類似于antd一樣的ui庫，google了很久，都沒有發(fā)現(xiàn)一個類似antd這種國人喜歡用的ui庫，大部分都是國外的那種material ui,因為公司多個flutter項目都需要用，每次都是寫好幾遍，而且還很難維護所以才有了這個打算，第一個要寫的ui組件就是日歷組件，日歷的ui以及數(shù)據(jù)，都已經(jīng)寫完了，目前正好需要給日歷寫控制器，所以才有了這篇文章
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比寧河網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式寧河網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋寧河地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。
在無狀態(tài)組件當中，組件的ui由傳入它的參數(shù)決定的，組件本身的不需要管理狀態(tài)。而有狀態(tài)組件會有多種狀態(tài)，而它的狀態(tài)是可以通過外部控制器來控制的。比如TextField，創(chuàng)建一個controller可以給TextField賦值初始值，也可以通過controller來獲取到變化之后的value值，而這個控制器就是controller?？梢杂脕砜刂埔粋€有狀態(tài)組件的行為以及狀態(tài)的一個類
為什么要用controller呢，起初我也沒想明白為什么要用，因為傳參數(shù)也可以解決類似的問題啊，就拿TextField來說，
但后來我發(fā)現(xiàn)，很多組件內(nèi)部的行為是沒辦法通過傳參數(shù)來控制的，尤其是在特殊的組件生命周期中，沒辦法實現(xiàn)，而通過controller，可以很好的解決這個問題，我自己感覺，controller的用處就是提供給外部操作當前組件的能力，包括組件的各種狀態(tài)，以及組件的各種行為，這里舉個栗子????
綜上，個人理解controller的作用就是暴露組件內(nèi)部的行為，屬性給父元素，使父元素可以很方便使用子元素提供的參數(shù)，而不需要去實現(xiàn)監(jiān)聽事件來獲取
回到正題，那么如何實現(xiàn)一個自己的controller呢，對我而言，不會就抄，抄誰的呢，當然是超官方的！讀官方的源碼，看它如何實現(xiàn)，然后我們加以模仿，不就是自己的了。竊書不能算偷……竊書！……讀書人的事，能算偷么？
這里借鑒了ScrollController的源碼，首先分析下源碼，以下是ScrollerController的源碼，我把看不懂的英文注釋刪掉了...本菜????看不懂就刪
看了看好像也沒多少東西，注意當前類的定義
是繼承了ChangeNotifier類，看著這個類頓時覺得好眼熟有沒有，對了，不就是我們平時寫provider用的那個東東嘛，查閱了官方文檔，具體是這么解釋的
用我這渣渣英語翻譯大概的意思就是，一個類，它可以被繼承，它可以被混合并且它提供了使用VoidCallback進行通知的 notification Api
盲猜和provider用法差不多，都是觀察者模式模式，父組件可以訂閱該controller的更改，當該controller通知其他監(jiān)聽器的時候，監(jiān)聽器的回調(diào)函數(shù)將被執(zhí)行，上面ScrollController中的attach中正好也使用了notification方法來通知監(jiān)聽者，具體滾動執(zhí)行的過程沒有看到，但是大致了解了controller的工作原理
好了，知道原理了，開搞
首先得思考，這個controller會提供什么，按照我當前給日歷組件的設(shè)計，目前會給外部提供當前日歷所有的行為事件以及最終的值
目前我寫的controller很簡單，只需要給外部父容器提供上一個月，下一個月的方法可以使用就可以，所以我的控制器很簡單，只有兩個方法，并且方法執(zhí)行完成之后進行消息通知，通知到各個訂閱者，也就是這里的日期組件 在日期組件的 initState方法中，對controller進行監(jiān)聽，從而改變ui
最外層父容器是這樣的，當前demo用setState臨時刷新ui
看起來還不錯，還有一些ui上的交互需要后續(xù)去調(diào)整
未完待續(xù)...
最近入了flutter的坑，就想著做一行愛一行，也不能把自己的頭銜寫死了就只做前端，只寫頁面。flutter寫起來也蠻舒服的，加油，打工人！
flutter跳轉(zhuǎn)原生頁面后的穿透問題
現(xiàn)象：
flutter頁面通過present跳轉(zhuǎn)原生頁面后，原生頁面上的點擊會首先響應(yīng)下面的flutter頁面中的內(nèi)容（比如按鈕什么的）。
這是flutter框架一直存在的一個bug。在github上有相關(guān)的issue。
原因推測：
推測是flutter對控制器（或者view）加了分類，重寫了控制器的點擊事件，用來計算是否在對應(yīng)的點擊位置有flutter響應(yīng)事件。沒有的話再扔出去點擊事件。
解決方案1：
在原生控制器中，加入點擊事件的幾個方法的空實現(xiàn)，用以覆蓋flutter框架中的實現(xiàn)：
-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{
}
-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{
}
-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{
}
-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{
}
讓事件不被flutter截獲即可。
解決方案2：
直接切換window的根控制器到原生控制器即可。別忘暫時保存flutter控制器。
在返回時再切換回flutter中。
解決方案3：
在flutter跳轉(zhuǎn)到原生頁面之前，在flutter中加上一個蒙層，用來隔絕手勢往flutter下面的view傳遞。原生頁面返回flutter時再移除這個蒙層。
Flutter開發(fā) -- [12 - 監(jiān)聽滾動事件]
ListView、GridView的組件控制器是ScrollController，我們可以通過它來獲取視圖的滾動信息，并且可以調(diào)用里面的方法來更新視圖的滾動位置。
另外，通常情況下，我們會根據(jù)滾動的位置來改變一些Widget的狀態(tài)信息，所以ScrollController通常會和StatefulWidget一起來使用，并且會在其中控制它的初始化、監(jiān)聽、銷毀等事件。
我們來做一個案例，當滾動到1000位置的時候，顯示一個回到頂部的按鈕：
如果我們希望監(jiān)聽什么時候開始滾動，什么時候結(jié)束滾動，這個時候我們可以通過 NotificationListener 。
案例: 列表滾動, 并且在中間顯示滾動進度
Flutter 之 滾動監(jiān)聽及控制（十九）
ListView、GridView的組件控制器是ScrollController，我們可以通過它來獲取視圖的滾動信息，并且可以調(diào)用里面的方法來更新視圖的滾動位置。
ScrollController構(gòu)造函數(shù)如下：
ScrollController常用的屬性和方法：
ScrollController間接繼承自Listenable，我們可以根據(jù)ScrollController來監(jiān)聽滾動事件，如：
示例
我們創(chuàng)建一個ListView，當滾動位置發(fā)生變化時，我們先打印出當前滾動位置，然后判斷當前位置是否超過1000像素，如果超過則在屏幕右下角顯示一個“返回頂部”的按鈕，該按鈕點擊后可以使ListView恢復到初始位置；如果沒有超過1000像素，則隱藏“返回頂部”按鈕。
ScrollPosition是用來保存可滾動組件的滾動位置的。一個ScrollController對象可以同時被多個可滾動組件使用，ScrollController會為每一個可滾動組件創(chuàng)建一個ScrollPosition對象，這些ScrollPosition保存在ScrollController的positions屬性中（ListScrollPosition）。ScrollPosition是真正保存滑動位置信息的對象，offset只是一個便捷屬性
一個 ScrollController 雖然可以對應(yīng)多個可滾動組件，但是有一些操作，如讀取滾動位置 offset ，則需要一對一！但是我們?nèi)匀豢梢栽谝粚Χ嗟那闆r下，通過其它方法讀取滾動位置，舉個例子，假設(shè)一個 ScrollController 同時被兩個可滾動組件使用，那么我們可以通過如下方式分別讀取他們的滾動位置：
我們可以通過 controller.positions.length 來確定 controller 被幾個可滾動組件使用。
ScrollPosition 有兩個常用方法： animateTo() 和 jumpTo() ，它們是真正來控制跳轉(zhuǎn)滾動位置的方法， ScrollController 的這兩個同名方法，內(nèi)部最終都會調(diào)用 ScrollPosition 的。
我們來介紹一下 ScrollController 的另外三個方法：
當 ScrollController 和可滾動組件關(guān)聯(lián)時，可滾動組件首先會調(diào)用 ScrollController 的 createScrollPosition() 方法來創(chuàng)建一個 ScrollPosition 來存儲滾動位置信息，接著，可滾動組件會調(diào)用 attach() 方法，將創(chuàng)建的 ScrollPosition 添加到 ScrollController 的 positions 屬性中，這一步稱為“注冊位置”，只有注冊后 animateTo() 和 jumpTo() 才可以被調(diào)用。
當可滾動組件銷毀時，會調(diào)用 ScrollController 的 detach() 方法，將其 ScrollPosition 對象從 ScrollController 的 positions 屬性中移除，這一步稱為“注銷位置”，注銷后 animateTo() 和 jumpTo() 將不能再被調(diào)用。
需要注意的是， ScrollController 的 animateTo() 和 jumpTo() 內(nèi)部會調(diào)用所有 ScrollPosition 的 animateTo() 和 jumpTo() ，以實現(xiàn)所有和該 ScrollController 關(guān)聯(lián)的可滾動組件都滾動到指定的位置。
Flutter Widget樹中子Widget可以通過發(fā)送通知（Notification）與父(包括祖先)Widget通信。父級組件可以通過NotificationListener組件來監(jiān)聽自己關(guān)注的通知
可滾動組件在滾動時會發(fā)送 ScrollNotification 類型的通知， ScrollBar 正是通過監(jiān)聽滾動通知來實現(xiàn)的。通過 NotificationListener 監(jiān)聽滾動事件和通過 ScrollController 有兩個主要的不同：
示例
下面，我們監(jiān)聽ListView的滾動通知，然后顯示當前滾動進度百分比：
在接收到滾動事件時，參數(shù)類型為ScrollNotification，它包括一個metrics屬性，它的類型是ScrollMetrics，該屬性包含當前ViewPort及滾動位置等信息：
Flutter是一個什么框架
Flutter是一個移動應(yīng)用程序的軟件開發(fā)工具包（SDK），具有以下特征：
跨平臺應(yīng)用的框架，沒有使用WebView或者系統(tǒng)平臺自帶的控件，使用自身的高性能渲染引擎自繪
簡化版的瀏覽器，最大限度在android和ios上統(tǒng)一UI，包括業(yè)務(wù)邏輯和用戶體驗
開發(fā)語言使用dart，結(jié)合C, C++, 和Skia（2D渲染引擎）構(gòu)建
支持hot reload，包含著完整的控件和工具鏈
一切皆控件，控件是每個Flutter應(yīng)用程序的基本構(gòu)建塊，與分離視圖、控制器、布局和其他屬性的框架不同，F(xiàn)lutter具有一致的統(tǒng)一對象模型：控件。一個控件可以定義：結(jié)構(gòu)元素（比如按鈕或菜單）、風格元素（比如字體或顏色方案）、布局的方面（比如填充）、一些業(yè)務(wù)邏輯等
組合大于繼承，控件本身通常由許多小型、單用途的控件組成，結(jié)合起來產(chǎn)生強大的效果，類的層次結(jié)構(gòu)是扁平的，以最大化可能的組合數(shù)量
強化版的WebView，框架僅提供一個View層，大部分功能要依賴原生
目前只能夠運行大部分Dart代碼（不能引入dart:mirrors或dart:html庫）
flutter-動畫
1.動畫原理：在一段時間內(nèi)快速的多次改變UI外觀，由于人眼會產(chǎn)生視覺暫留所以最終看到的就是一個連續(xù)的動畫。
UI的一次改變稱為一個動畫幀，對應(yīng)一次屏幕刷新。
FPS：幀率，每秒的動畫幀數(shù)。
flutter動畫分為兩類：
常見動畫模式：
是一個抽象類，主要的功能是保存動畫的值和狀態(tài)。常用的一個Animation類是Animation double ,是一個在一段時間內(nèi)依次生成一個區(qū)間之間的值的類，可以是線性或者曲線或者其他。
可以生成除double之外的其他類型值，如：Animation Color 或 Animation Size 。
是一個動畫控制器，控制動畫的播放狀態(tài)，在屏幕刷新的每一幀，就會生成一個新的值。
包含動畫的啟動forward()、停止stop() 、反向播放 reverse()等方法，在給定的時間段內(nèi)線性的生成從0.0到1.0（默認區(qū)間）的數(shù)字。
curve:描述動畫的曲線過程。
curvedAnimation:指定動畫的曲線。
常用Curve：
繼承自Animatable T ，表示的就是一個 Animation 對象的取值范圍，只需要設(shè)置開始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。
例如，Tween可能會生成從紅到藍之間的色值，或者從0到255。
Tween.animate:返回一個Animation。
映射過程：
1). Tween.animation通過傳入 aniamtionController 獲得一個_AnimatedEvaluation 類型的 animation 對象(基類為 Animation)， 并且將 aniamtionController 和 Tween 對象傳入了 _AnimatedEvaluation 對象。
2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分別為 Tween 對象和 AnimationController 對象。
3). 這里的 animation 其實就是前面的 AnimationController 對象， transform 方法里面的 animation.value則就是 AnimationController 線性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。
接收一個TickerProvider類型的對象，它的主要職責是創(chuàng)建Ticker。
防止屏幕外動畫消耗資源。
[圖片上傳失敗...(image-115b94-1636441483468)]
過程：
回調(diào)：
不使用addListener()和setState()來給widget添加動畫。
使用AnimatedWidget，將widget分離出來，創(chuàng)建一個可重用動畫的widget，AnimatedWidget中會自動調(diào)用addListener()和setState()
AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
如何渲染過渡，把渲染過程也抽象出來：
AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。
MaterialPageRoute：平臺風格一致的路由切換動畫
CupertinoPageRoute：左右切換風格
自定義：PageRouteBuilder
1.要創(chuàng)建交織動畫，需要使用多個動畫對象（Animation）。
2.一個AnimationController控制所有的動畫對象。
3.給每一個動畫對象指定時間間隔（Interval）
可以同時對其新、舊子元素添加顯示、隱藏動畫.
當AnimatedSwitcher的child發(fā)生變化時（類型或Key不同），舊child會執(zhí)行隱藏動畫，新child會執(zhí)行執(zhí)行顯示動畫。
希望大家支持一下，感謝
當前題目：flutter控制器,Flutter教程
網(wǎng)頁網(wǎng)址：http://www.dlmjj.cn/article/dsijjgi.html
