建站
咨詢
售后
建站咨詢
新聞中心
flutter-動(dòng)畫
1.動(dòng)畫原理：在一段時(shí)間內(nèi)快速的多次改變UI外觀，由于人眼會(huì)產(chǎn)生視覺暫留所以最終看到的就是一個(gè)連續(xù)的動(dòng)畫。
創(chuàng)新互聯(lián)主營囊謙網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App定制開發(fā),囊謙h5微信小程序搭建,囊謙網(wǎng)站營銷推廣歡迎囊謙等地區(qū)企業(yè)咨詢
UI的一次改變稱為一個(gè)動(dòng)畫幀，對(duì)應(yīng)一次屏幕刷新。
FPS：幀率，每秒的動(dòng)畫幀數(shù)。
flutter動(dòng)畫分為兩類：
常見動(dòng)畫模式：
是一個(gè)抽象類，主要的功能是保存動(dòng)畫的值和狀態(tài)。常用的一個(gè)Animation類是Animation double ,是一個(gè)在一段時(shí)間內(nèi)依次生成一個(gè)區(qū)間之間的值的類，可以是線性或者曲線或者其他。
可以生成除double之外的其他類型值，如：Animation Color 或 Animation Size 。
是一個(gè)動(dòng)畫控制器，控制動(dòng)畫的播放狀態(tài)，在屏幕刷新的每一幀，就會(huì)生成一個(gè)新的值。
包含動(dòng)畫的啟動(dòng)forward()、停止stop() 、反向播放 reverse()等方法，在給定的時(shí)間段內(nèi)線性的生成從0.0到1.0（默認(rèn)區(qū)間）的數(shù)字。
curve:描述動(dòng)畫的曲線過程。
curvedAnimation:指定動(dòng)畫的曲線。
常用Curve：
繼承自Animatable T ，表示的就是一個(gè) Animation 對(duì)象的取值范圍，只需要設(shè)置開始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。
例如，Tween可能會(huì)生成從紅到藍(lán)之間的色值，或者從0到255。
Tween.animate:返回一個(gè)Animation。
映射過程：
1). Tween.animation通過傳入 aniamtionController 獲得一個(gè)_AnimatedEvaluation 類型的 animation 對(duì)象(基類為 Animation)， 并且將 aniamtionController 和 Tween 對(duì)象傳入了 _AnimatedEvaluation 對(duì)象。
2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分別為 Tween 對(duì)象和 AnimationController 對(duì)象。
3). 這里的 animation 其實(shí)就是前面的 AnimationController 對(duì)象， transform 方法里面的 animation.value則就是 AnimationController 線性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個(gè) 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。
接收一個(gè)TickerProvider類型的對(duì)象，它的主要職責(zé)是創(chuàng)建Ticker。
防止屏幕外動(dòng)畫消耗資源。
[圖片上傳失敗...(image-115b94-1636441483468)]
過程：
回調(diào)：
不使用addListener()和setState()來給widget添加動(dòng)畫。
使用AnimatedWidget，將widget分離出來，創(chuàng)建一個(gè)可重用動(dòng)畫的widget，AnimatedWidget中會(huì)自動(dòng)調(diào)用addListener()和setState()
AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
如何渲染過渡，把渲染過程也抽象出來：
AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。
MaterialPageRoute：平臺(tái)風(fēng)格一致的路由切換動(dòng)畫
CupertinoPageRoute：左右切換風(fēng)格
自定義：PageRouteBuilder
1.要?jiǎng)?chuàng)建交織動(dòng)畫，需要使用多個(gè)動(dòng)畫對(duì)象（Animation）。
2.一個(gè)AnimationController控制所有的動(dòng)畫對(duì)象。
3.給每一個(gè)動(dòng)畫對(duì)象指定時(shí)間間隔（Interval）
可以同時(shí)對(duì)其新、舊子元素添加顯示、隱藏動(dòng)畫.
當(dāng)AnimatedSwitcher的child發(fā)生變化時(shí)（類型或Key不同），舊child會(huì)執(zhí)行隱藏動(dòng)畫，新child會(huì)執(zhí)行執(zhí)行顯示動(dòng)畫。
希望大家支持一下，感謝
[img]Flutter初探--常用依賴包
國外地址：
國內(nèi)鏡像：
以 flutter_screenutil 為例
路由框架 annotation_route
狀態(tài)管理 provider
UI適配 flutter_screenutil
刷新控件 flutter_easyrefresh
網(wǎng)絡(luò)請(qǐng)求 dio
toast控件 fluttertoast
圖表庫 charts_flutter
網(wǎng)絡(luò)監(jiān)聽 connectivity
事件總線 event_bus
日歷組件 table_calendar
官方webview webview_flutter
第三方webview flutter_webview_plugin
該篇文章為常用依賴包總結(jié)，用來記錄所需要的常用依賴包，后續(xù)會(huì)不斷擴(kuò)充內(nèi)容~
flutter 路由監(jiān)聽友盟頁面統(tǒng)計(jì)方案
1.當(dāng)我們使用flutter開發(fā)的時(shí)候 頁面里面只有 initState 與dispose方法.
initState 只有進(jìn)入頁面的時(shí)候調(diào)用,并且在二級(jí)頁面返回的時(shí)候 是不會(huì)有調(diào)用的
dispose 當(dāng)頁面銷毀的時(shí)候 才會(huì)調(diào)用，你進(jìn)入二級(jí)頁面是不會(huì)調(diào)用的
綜上分析者兩個(gè)方法沒有辦法友盟頁面統(tǒng)計(jì)分享上報(bào)
2.我們可以使用 NavigatorObserver來解決
首先新建一個(gè) 繼承與NavigatorObserver的類 實(shí)現(xiàn)NavigatorObserver 的方法就可以了
最后我們需要再 MaterialApp里面的navigatorObservers添加監(jiān)聽就可以了
這時(shí)候 會(huì)有一個(gè)問題點(diǎn)擊tabbar幾個(gè)主頁是沒有統(tǒng)計(jì)的 ，我們也需要再tabbar的點(diǎn)擊方法來進(jìn)行處理
Flutter狀態(tài)管理--GetX的簡(jiǎn)單使用
一、前言
Flutter開發(fā)，就需要對(duì)各種狀態(tài)的管理，就是在請(qǐng)求數(shù)據(jù)的時(shí)候需要實(shí)時(shí)變化，各種交互變化等，在沒有使用GetX之前使用Provider,用Provider的時(shí)候覺得真香，挺方便的，需要刷新的時(shí)候直接 notifyListeners(); 用了GetX之后覺得Provider太繁瑣了。這邊介紹下GetX的使用以及常用的方法。
二、 GetX
GetX 是 Flutter 上的一個(gè)輕量且強(qiáng)大的解決方案：高性能的狀態(tài)管理、智能的依賴注入和便捷的路由管理。
1、相關(guān)優(yōu)勢(shì)：
三、使用
1、第一步 引入get
2、第二步
修改入口、配置路由
3、路由
Routes類
Pages類
4、狀態(tài)管理
我一般一個(gè)page對(duì)應(yīng)一個(gè)controller， controller來處理邏輯，控制page.
簡(jiǎn)單使用
5、依賴注入
依賴注入也是我喜歡的，可以減少很多工作。
第一步
第二步
6、跨頁面交互
7、黑暗模式
可以參考前期寫的博客。 黑暗模式的適配
網(wǎng)站題目：flutter替換路由,flutter 路由攔截
文章鏈接：http://www.dlmjj.cn/article/dsohoip.html
