建站
咨詢
售后
建站咨詢
新聞中心
Flutter:快速創(chuàng)建簡單閃屏頁
近來閑暇時間一直在做Flutter,閃屏頁是一個比較常見的需求,網(wǎng)上的閃屏頁教程大部分是那種類似于廣告頁,而非iOS中的 LaunchScreen 性質(zhì)的閃屏頁.按照原來的方案我們要配置閃屏頁的話,我們需要同時配置兩端的閃屏頁,那么有沒有比較簡單的方案來配置閃屏頁呢? 毋庸置疑,當然是有了,那就是Flutter的插件 - flutter_native_splash . 接下來我們就來看一下具體應(yīng)該怎么使用這個插件.
創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10余年品質(zhì)，值得信賴！
首先把 flutter_native_splash 導入到工程的 pubspec.yaml 中.這里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具體如下所示.
接下來我們就來配置 flutter_native_splash ,在配置之前我們看一下 flutter_native_splash 的可配置項.
例如,我現(xiàn)在只有一個logo圖片,那么我想生成iOS和android兩端的閃屏頁,這時候我只需在 pubspec.yaml 如下設(shè)置即可.
當然了,如果你有其他配置可以自行進行添加.
配置完成了,我們該如何生成呢?這時候需要我們打開終端 cd 到我們的工程目錄下.如果是Android Studio 或者 VSCode 默認就是在當前工程目錄下.
然后我們需要執(zhí)行下面的三個命令來生成閃屏頁
每一次都敲三個命令實屬麻煩,我們把上訴的三個命令整合成一個命令,如下所示.
那么,我們不想使用該插件生成的閃屏頁該怎么辦呢?我們只需要執(zhí)行下面命令即可.
注:每一次更換圖片都是需要重新執(zhí)行命令重新生成.
OK,上面就是關(guān)于 flutter_native_splash 的使用全部內(nèi)容,其實比較簡單,如果需要定制化的,建議還是各自平臺配置各自的閃屏頁.如果有任何問題歡迎在評論區(qū)批評指導,感謝大家了.
Flutter中showDialog()后關(guān)閉Dialog
在耗時操作的時候，一般都要彈出一個加載框，然后在完成的時候再把加載框關(guān)掉，在Flutter中可以直接用showDialog()來彈出一個對話框。
這是一個簡單的提示對話框，包含了關(guān)閉按鈕，點擊就能關(guān)閉。但一般的耗時操作完成，就需要我們自己把dialog關(guān)閉掉。
首先，開啟dialog的時機。由于我們需要獲取到BuildContext，所以就得等build()方法走完，這里可以用Future.delayed()來等創(chuàng)建好BuildContext再進行創(chuàng)建，或者用Timer來延遲操作，我選擇了前者。
其中delayed()在initState()結(jié)尾來做就行，這里參考網(wǎng)友封裝了一個LoadingDialog。
那么接下來要在什么時機關(guān)閉呢？
一開始，我理所當然的以為，是在異步方法結(jié)束后，去更新界面的時候關(guān)閉，也就是setState(() {})的時候，可是不管怎么嘗試，用Navigator.pop()不行，用Navigator.of(context, rootNavigator: true).pop(result)也不行，用FlutterBoost.singleton.close(id)也不行，用FlutterBoost.singleton.closeCurrent()也不行，都會直接把非Dialog的頁面也關(guān)閉掉，這讓我百思不得其解，因為showDialog()的本質(zhì)也是新建了一個Route出來，也就是最頂層的頁面是彈出的Dialog，可是為什么關(guān)不掉呢。
一番思前想后，把showDialog的邏輯移到和異步邏輯同級，也就是setState(() {})外面，然后把showDialog()自身創(chuàng)建的BuildContext傳進去就能正常關(guān)閉了。也就是，在setState(() {})的時候，其實用的context還是非Dialog頁面的，所以關(guān)閉的當然就不是Dialog了。
持有Dialog自己的BuildContext，然后在異步以后調(diào)用就行了。
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應(yīng)用啟動頁設(shè)置,解決 白/黑 屏情況
出現(xiàn)此情況的原因有兩種
解決:
找到 \app\src\main\res\drawable\launch_background.xml 文件，這個里面初始化了布局標簽,只需要把圖片替換為我們自己的就可以。
或者根據(jù)不同手機的分辨率 在mipmap下放置圖片例如：
之后前往 styles.xml 文件設(shè)置啟動頁
重新打包就可以看到 剛剛設(shè)置的啟動頁了
效果例如：
[圖片上傳失敗...(image-7e5c2-1586668143446)]
至此可以流暢的打開啟動頁了
flutter 鍵盤彈出時list view 置底
1、點擊輸入flutter框彈出軟鍵盤時，遮擋本輸入框一部分。
2、點擊輸入框，輸入框跟隨軟鍵盤自動上移時其他不該移動的內(nèi)容也跟隨上移導致的flutter鍵盤彈出時listview置底。
在Flutter開發(fā)iOS中，app啟動黑屏之后顯示啟動頁的解決辦法
一、由于安卓那邊升級了某些插件，我這邊pull之后，進行了Pub get。運行ios項目，發(fā)現(xiàn)app啟動之后，先閃現(xiàn)黑屏，然后再出現(xiàn)啟動頁，之后在進入主頁面。解決此問題的方法，是把啟動頁的圖片移除，把啟動頁的圖片修改一個新名字，再導入項目中，再重新運行項目，就正常了。
網(wǎng)站題目：flutter彈出頁面,flutter狀態(tài)欄
文章分享：http://fisionsoft.com.cn/article/phjejs.html
