建站
咨詢
售后
建站咨詢
新聞中心
Flutter狀態(tài)管理--GetX的簡單使用
一、前言
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、西吉網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、西吉網(wǎng)絡(luò)營銷、西吉企業(yè)策劃、西吉品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學生創(chuàng)業(yè)者提供西吉建站搭建服務，24小時服務熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
Flutter開發(fā)，就需要對各種狀態(tài)的管理，就是在請求數(shù)據(jù)的時候需要實時變化，各種交互變化等，在沒有使用GetX之前使用Provider,用Provider的時候覺得真香，挺方便的，需要刷新的時候直接 notifyListeners(); 用了GetX之后覺得Provider太繁瑣了。這邊介紹下GetX的使用以及常用的方法。
二、 GetX
GetX 是 Flutter 上的一個輕量且強大的解決方案：高性能的狀態(tài)管理、智能的依賴注入和便捷的路由管理。
1、相關(guān)優(yōu)勢：
三、使用
1、第一步 引入get
2、第二步
修改入口、配置路由
3、路由
Routes類
Pages類
4、狀態(tài)管理
我一般一個page對應一個controller， controller來處理邏輯，控制page.
簡單使用
5、依賴注入
依賴注入也是我喜歡的，可以減少很多工作。
第一步
第二步
6、跨頁面交互
7、黑暗模式
可以參考前期寫的博客。 黑暗模式的適配
Flutter（六）Android與Flutter混合開發(fā)（Hybird）
如果我們目前的項目是Android的，但是接下來我們希望部分頁面可以使用Flutter進行開發(fā)，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們該如何實現(xiàn)呢？
假設(shè)你現(xiàn)在Android項目的目錄的結(jié)構(gòu)是這樣的
這時候如果你想創(chuàng)建一個Flutter模塊，使得Android模塊和Flutter模塊之間可以進行交互，我們可以通過Android Studio新建一個Flutter Module，具體過程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為
也就是說，最終你的項目結(jié)構(gòu)會是這樣的
接下來在Android Module的 build.gradle 文件中添加flutter依賴
先創(chuàng)建一個Flutter頁面
這里比較重要的是 window.defaultRouteName 這個字段，這個字段可以接收從Native傳遞過來的參數(shù) （下文我們會介紹原生傳遞參數(shù)的方法），也就是說通過這個字段我們就可以進行Flutter頁面的路由的分發(fā)
我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ，這里的 initialRoute 方法中傳遞的參數(shù)就對應Flutter層的 window.defaultRouteName
注意：需要在 AndroidManifest.xml 注冊 FlutterActivity
自己創(chuàng)建一個 FlutterAppActivity 繼承自 FlutterActivity
在 MainActivity 中啟動 FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊 FlutterAppActivity ）
兩種啟動方式的區(qū)別
如果單純只是想打開一個Flutter頁面，兩種方式實際上基本沒有太大區(qū)別，第一種方式也許還會更簡單一點。但是，在Flutter開發(fā)中，我們往往還需要開發(fā)一些Native插件供Flutter調(diào)用，如果使用復寫 FlutterActivity 的方式更有利于我們在 FlutterActivity 中注冊我們的Native插件，所以實際開發(fā)中一般推薦使用第二種方式
擴展思考
initialRoute 從名稱上看起來是Flutter提供給我們進行Native與Flutter交互的路由跳轉(zhuǎn)的，但是實際上他就是一個字符串，我們不僅僅可以傳遞一個路由名稱，有時候我們也可以通過這個參數(shù)傳遞一串JSON數(shù)據(jù)，然后在Flutter端進行解析，這樣我們就可以通過這個參數(shù)做更多的事情
activity_main.xml
FrameLayout 用于承載Flutter組件
MainActivity.java
使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中
運行結(jié)果
上半部分是原生的TextView，下半部分是Flutter的Text組件
本節(jié)主要介紹了Native和Flutter之間的頁面跳轉(zhuǎn)，以及同一個頁面中Native與Flutter組件的組合。接下來會介紹如何編寫Android插件與Flutter進行數(shù)據(jù)交互
Flutter初探--常用依賴包
國外地址：
國內(nèi)鏡像：
以 flutter_screenutil 為例
路由框架 annotation_route
狀態(tài)管理 provider
UI適配 flutter_screenutil
刷新控件 flutter_easyrefresh
網(wǎng)絡(luò)請求 dio
toast控件 fluttertoast
圖表庫 charts_flutter
網(wǎng)絡(luò)監(jiān)聽 connectivity
事件總線 event_bus
日歷組件 table_calendar
官方webview webview_flutter
第三方webview flutter_webview_plugin
該篇文章為常用依賴包總結(jié)，用來記錄所需要的常用依賴包，后續(xù)會不斷擴充內(nèi)容~
Flutter里的viewWillAppear
首先要在main.dart文件里創(chuàng)建全局路由監(jiān)聽對象
傳入MaterialApp的navigatorObservers屬性里
在需要的頁面里使用routeObserver加入監(jiān)聽:
1.在該頁面的State混入RouteAware
2.重寫didChangeDependencies方法加入監(jiān)聽
3.在頁面dispose時銷毀監(jiān)聽
4.重寫需要監(jiān)聽的事件方法
當Push到該頁面時：
當Pop到該頁面時：
當該頁面Push到其他頁面時：
當該頁面被Pop時：
2022.6.11:
注冊監(jiān)聽入?yún)㈩愋陀凶兓?/p>
flutter-動畫
1.動畫原理：在一段時間內(nèi)快速的多次改變UI外觀，由于人眼會產(chǎn)生視覺暫留所以最終看到的就是一個連續(xù)的動畫。
UI的一次改變稱為一個動畫幀，對應一次屏幕刷新。
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 Boost 接入實踐（iOS 篇）
本文將簡單梳理一下 iOS 工程接入的 Flutter Boost 的流程，以作為前文的補充。
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'FlutterHybridiOS' do
install_all_flutter_pods(flutter_application_path)
end
接著在工程根目錄下運行 pod install ，即可集成上 Flutter Module?？吹轿覀兊?Pods 中多了以下幾個模塊，即說明集成成功。
接著在工程根目錄下運行 pod install ，即可集成上 Flutter Module。看到我們的 Pods 中多了以下幾個模塊，即說明集成成功。
這一塊直接參照 Flutter Boost 官方提供的 example 就好了：
PlatformRouterImp.h：
PlatformRouterImp.m：
可以看到，F(xiàn)lutter Boost 支持常規(guī) push，也支持打開模態(tài)彈窗，也支持手動 pop。
AppDelegate.h：
AppDelegate.m：
同樣的，這里可在 Native 端用兩種不同的方式去打開我們在 Flutter Module 中注冊好的路由名。
至此，我們成功在 iOS 工程中接入了 Flutter Boost，那就開啟我們的混編之旅吧~
本文題目：Flutter路由機制,flutter 路由管理
URL地址：http://fisionsoft.com.cn/article/dsicgci.html
