建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
(1)Flutter記錄之啟動(dòng)頁(yè)
一年半前玩過(guò)flutter，忘光光...現(xiàn)在是時(shí)候重新拾取了。~
成都創(chuàng)新互聯(lián)公司是一家專(zhuān)注于成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),東鄉(xiāng)網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:東鄉(xiāng)等地區(qū)。東鄉(xiāng)做網(wǎng)站價(jià)格咨詢(xún):18980820575
啟動(dòng)頁(yè)一般只放圖片或者加幾行文字。
1、創(chuàng)建好flutter項(xiàng)目之后，在lib文件下面新建launch.dart或xx.dart.
2、在根目錄下新建images文件夾，如已有直接放入圖片
3、flutter_yijiake.iml中加入注入該圖片，并注意空格
4、在根目錄下的test/widget_test.dart中更改默認(rèn)的啟動(dòng)頁(yè)為當(dāng)前的啟動(dòng)頁(yè)路徑
5、最后重新設(shè)置啟動(dòng)時(shí)的頁(yè)面
6、非常簡(jiǎn)單的啟動(dòng)頁(yè)面放logo圖片
值得一說(shuō)的是，flutter框架的UI組件需要已new 組件的形式展開(kāi)。
flutter 頁(yè)面的生命周期（轉(zhuǎn)）
轉(zhuǎn)自
在 Flutter 中，有兩類(lèi)常用的 Widget：
在開(kāi)發(fā)過(guò)程中，我們經(jīng)常需要繼承它們兩來(lái)實(shí)現(xiàn)自己的 Widget。
一個(gè) StatelessWidget 是不能被改變的，比如： Icon 、 Text 等。
如果你的控件一旦顯示，就不需要再做任何的變更，那么你應(yīng)該使用 StatelessWidget 。
實(shí)現(xiàn)一個(gè)自己的 StatelessWidget 很簡(jiǎn)單。
當(dāng)你看到下面這個(gè)例子?時(shí)，你就知道它有多簡(jiǎn)單了。
看，只要在 build() 中返回你的視圖就可以了。
一個(gè) StatefulWidget 是有狀態(tài)的，可變的。
它可以改變自己的外觀，以響應(yīng)用戶(hù)的操作或者數(shù)據(jù)的變化。
比如： CheckBox 、 Switch ..
我們之所以能夠改變一個(gè) StatefulWidget ，是因?yàn)樗幸粋€(gè)設(shè)置狀態(tài)的函數(shù)：
調(diào)用這個(gè)函數(shù)后，就會(huì)觸發(fā) StatefulWidget 的視圖樹(shù)重建。
因此，當(dāng)我們需要一個(gè)可交互的，即能根據(jù)用戶(hù)操作或數(shù)據(jù)變化而改變視圖的 Widget 時(shí)，那就得用上 StatelessWidget 了。
現(xiàn)在，來(lái)創(chuàng)建一個(gè)自定義的 StatefulWidget：
從上面的例子中可以看到， StatefulWidget 會(huì)要求提供一個(gè)含有視圖樹(shù)的 State 。
既然 State 能夠控制一個(gè)視圖的狀態(tài)，那它肯定會(huì)有一系列的生命周期。
上圖就是 State 的生命周期圖。
Flutter 啟動(dòng)頁(yè)的前世今生適配歷程
APP 啟動(dòng)頁(yè)在國(guó)內(nèi)是最常見(jiàn)也是必備的場(chǎng)景，其中啟動(dòng)頁(yè)在 iOS 上算是強(qiáng)制性的要求，其實(shí)配置啟動(dòng)頁(yè)挺簡(jiǎn)單，因?yàn)樵?Flutter 里現(xiàn)在只需要：
一般只要配置無(wú)誤并且圖片尺寸匹配，基本上就不會(huì)有什么問(wèn)題， 那既然這樣，還有什么需要適配的呢？
事實(shí)上大部分時(shí)候 iOS 是不會(huì)有什么問(wèn)題， 因?yàn)? LaunchScreen.storyboard 的流程本就是 iOS 官方用來(lái)做應(yīng)用啟動(dòng)的過(guò)渡；而對(duì)于 Andorid 而言，直到 12 之前 windowBackground 這種其實(shí)只能算“民間”野路子 ，所以對(duì)于 Andorid 來(lái)說(shuō)，這其中就涉及到一個(gè)點(diǎn)：
所以下面主要介紹 Flutter 在 Android 上為了這個(gè)啟動(dòng)圖做了哪些騷操作～
在已經(jīng)忘記版本的“遠(yuǎn)古時(shí)期” ， FlutterActivity 還在 io.flutter.app.FlutterActivity 路徑下的時(shí)候，那時(shí)啟動(dòng)頁(yè)的邏輯相對(duì)簡(jiǎn)單，主要是通過(guò) App 的 AndroidManifest 文件里是否配置了 SplashScreenUntilFirstFrame 來(lái)進(jìn)行判斷。
在 FlutterActivity 內(nèi)部 FlutterView 被創(chuàng)建的時(shí)候，會(huì)通過(guò)讀取 meta-data 來(lái)判斷是否需要使用 createLaunchView 邏輯 ：
是不是很簡(jiǎn)單，那就會(huì)有人疑問(wèn)為什么要這樣做？我直接配置 Activity 的 android:windowBackground 不就完成了嗎？
這就是上面提到的時(shí)間差問(wèn)題， 因?yàn)閱?dòng)頁(yè)到 Flutter 渲染完第一幀畫(huà)面中間，會(huì)出現(xiàn)概率出現(xiàn)黑屏的情況，所以才需要這個(gè)行為來(lái)實(shí)現(xiàn)過(guò)渡 。
經(jīng)歷了“遠(yuǎn)古時(shí)代”之后， FlutterActivity 來(lái)到了 io.flutter.embedding.android.FlutterActivity ， 在到 2.5 版本發(fā)布之前，F(xiàn)lutter 又針對(duì)這個(gè)啟動(dòng)過(guò)程做了不少調(diào)整和優(yōu)化，其中主要就是 SplashScreen 。
自從開(kāi)始進(jìn)入 embedding 階段后， FlutterActivity 主要用于實(shí)現(xiàn)了一個(gè)叫 Host 的 interface ，其中和我們有關(guān)系的就是 provideSplashScreen 。
默認(rèn)情況下它會(huì)從 AndroidManifest 文件里是否配置了 SplashScreenDrawable 來(lái)進(jìn)行判斷 。
默認(rèn)情況下當(dāng) AndroidManifest 文件里配置了 SplashScreenDrawable ，那么這個(gè) Drawable 就會(huì)在 FlutterActivity 創(chuàng)建 FlutterView 時(shí)被構(gòu)建成 DrawableSplashScreen 。
DrawableSplashScreen 其實(shí)就是一個(gè)實(shí)現(xiàn)了 io.flutter.embedding.android.SplashScreen 接口的類(lèi)，它的作用就是：
之后 FlutterActivity 內(nèi)會(huì)創(chuàng)建出 FlutterSplashView ，它是個(gè) FrameLayout。
FlutterSplashView 將 FlutterView 和 ImageView 添加到一起， 然后通過(guò) transitionToFlutter 的方法來(lái)執(zhí)行動(dòng)畫(huà)，最后動(dòng)畫(huà)結(jié)束時(shí)通過(guò) onTransitionComplete 移除 splashScreenView 。
所以整體邏輯就是：
當(dāng)然這里也是分狀態(tài)：
當(dāng)然這個(gè)階段的 FlutterActivity 也可以通過(guò) override provideSplashScreen 方法來(lái)自定義 SplashScreen 。
看到?jīng)]有，做了這么多其實(shí)也就是為了彌補(bǔ)啟動(dòng)頁(yè)和 Flutter 渲染之間， 另外還有一個(gè)優(yōu)化，叫 NormalTheme 。
通過(guò)該配置 NormalTheme ，在 Activity 啟動(dòng)時(shí)，就會(huì)首先執(zhí)行 switchLaunchThemeForNormalTheme(); 方法將主題從 LaunchTheme 切換到 NormalTheme 。
大概配置完就是如下樣子， 前面分析那么多其實(shí)就是為了告訴你，如果出現(xiàn)問(wèn)題了，你可以從哪個(gè)地方去找到對(duì)應(yīng)的點(diǎn) 。
講了那么多， Flutter 2.5 之后 provideSplashScreen 和 io.flutter.embedding.android.SplashScreenDrawable 就被棄用了，驚不喜驚喜，意不意外，開(kāi)不開(kāi)心 ？
通過(guò)源碼你會(huì)發(fā)現(xiàn)，當(dāng)你設(shè)置了 splashScreen 的時(shí)候，會(huì)看到一個(gè) log 警告：
為什么會(huì)棄用？
其實(shí)這個(gè)提議是在 這個(gè) issue 上，然后通過(guò) 這個(gè) pr 完成調(diào)整。
大概意思就是： 原本的設(shè)計(jì)搞復(fù)雜了，用 OnPreDrawListener 更精準(zhǔn)，而且不需要為了后面 Andorid12 的啟動(dòng)支持做其他兼容，只需要給 FlutterActivity 等類(lèi)增加接口開(kāi)關(guān)即可 。
也就是2.5之后 Flutter 使用 ViewTreeObserver.OnPreDrawListener 來(lái)實(shí)現(xiàn)延遲直到加載出 Flutter 的第一幀。
為什么說(shuō)默認(rèn)情況？ 因?yàn)檫@個(gè)行為在 FlutterActivity 里，是在 getRenderMode() == RenderMode.surface 才會(huì)被調(diào)用，而 RenderMode 又和 BackgroundMode 有關(guān)心 。
所以在 2.5 版本后， FlutterActivity 內(nèi)部創(chuàng)建完 FlutterView 后就會(huì)執(zhí)行一個(gè) delayFirstAndroidViewDraw 的操作。
這里主要注意一個(gè)參數(shù)： isFlutterUiDisplayed 。
當(dāng) Flutter 被完成展示的時(shí)候， isFlutterUiDisplayed 就會(huì)被設(shè)置為 true。
所以當(dāng) Flutter 沒(méi)有執(zhí)行完成之前， FlutterView 的 onPreDraw 就會(huì)一直返回 false ，這也是 Flutter 2.5 開(kāi)始之后適配啟動(dòng)頁(yè)的新調(diào)整。
看了這么多，大概可以看到其實(shí)開(kāi)源項(xiàng)目的推進(jìn)并不是一帆風(fēng)順的，沒(méi)有什么是一開(kāi)始就是最優(yōu)解，而是經(jīng)過(guò)多方嘗試和交流，才有了現(xiàn)在的版本，事實(shí)上開(kāi)源項(xiàng)目里，類(lèi)似這樣的經(jīng)歷數(shù)不勝數(shù)：
flutter頁(yè)面的繪制和管理
Element管理Widget和RenderObject。
widget保持顯示當(dāng)前的頁(yè)面狀態(tài)，當(dāng)widget產(chǎn)生點(diǎn)擊等交互，調(diào)用setState()改變element中管理的state，
網(wǎng)頁(yè)名稱(chēng)：flutter頁(yè)面是什么的簡(jiǎn)單介紹
文章URL：http://fisionsoft.com.cn/article/dssocsd.html
