調(diào)用SystemChrome.setEnabledSystemUIOverlays([]);
魚峰網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)建站!從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作,到程序開發(fā),運營維護。創(chuàng)新互聯(lián)建站從2013年成立到現(xiàn)在10年的時間,我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗,來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
把狀態(tài)欄和虛擬按鍵隱藏掉,
跳轉(zhuǎn)到其他頁面后需要調(diào)用
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);把狀態(tài)欄顯示出來,
需要一起調(diào)用底部虛擬按鍵
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom])
記錄下自己踩過的坑,怕忘了
一.TextField:
1.去掉輸入數(shù)字的計數(shù):decoration中的counterStyle: TextStyle(color: Colors.transparent).
2.去掉獲取和失去焦點時邊框改變顏色的效果:decoration內(nèi)border: InputBorder.none,
3.去邊框時設(shè)置BorderSide的width為0或color: Colors.transparent后依然存在邊框時,需要設(shè)置為borderSide: BorderSide.none
4.設(shè)置背景色需要在decoration內(nèi) ? ? filled:true, ? fillColor: Colors.blue同時設(shè)置才會顯示
二.Uint8List類型和string類型,Listint的轉(zhuǎn)換
連續(xù)兩次base64解碼時,參數(shù)只能使用string類型,但是base64解碼后是Uint8List類型,此時需要將Uint8List類型轉(zhuǎn)換為string類型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';
Listint轉(zhuǎn)Uint8List:讀取接口時獲取的數(shù)據(jù)是Listint的圖片數(shù)據(jù),想顯示時需要轉(zhuǎn)成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可
三.報錯:DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...
這是因為dio請求返回的數(shù)據(jù)默認是以json的格式讀取的,而返回的數(shù)據(jù)是密文形式,需要修改dio的Options的responseType為ResponseType.PLAIN,這樣返回的數(shù)據(jù)就以字符串形式處理.
四.去掉點擊控件背景出現(xiàn)的水波紋效果,即去掉md的效果:
在main.dart的MaterialApp內(nèi)的theme加上splashColor: Colors.transparent
五.布局去掉沉浸式效果和布局設(shè)置占滿全屏卻無效的問題
使用Scaffold的body的布局默認是沉浸式的,將狀態(tài)欄一起包含了,可以通過在body后添加一層SafeArea即可.
布局設(shè)置double.infinity占滿全屏高度卻無效,大部分情況都是因為某一級的父布局的高度已經(jīng)有了限制,所以設(shè)置充滿屏幕只會充滿父布局,有些widget默認是按內(nèi)容填充類似wrap_content就會導(dǎo)致寫布局的過程中自己沒有限制高度但最后的布局不是自己想要的,可以給各個父布局設(shè)置不同背景顏色來查看是從哪兒開始被限制了高度來排查問題.
六.占滿剩余空間,類似android的match_parent可以使用double.infinity
七.LinearProgressIndicator
1.LinearProgressIndicator設(shè)置進度值的顏色為單一顏色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))
2.給LinearProgressIndicator設(shè)置圓角:ClipRRect(
borderRadius:BorderRadius.circular(60.0),
child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),
)
八.Expanded:
1.若嵌套多層column且內(nèi)容的高度都不確定需要占滿剩余空間,需要每層的column的內(nèi)容都嵌套一層expanded來申明每層都占滿剩余的空間,否則最里面的內(nèi)容層需要指定高度,不然會報錯
九.Container設(shè)置最小/大寬度或高度:
constraints:BoxConstraints(minHeight:56),
十.滑動的widget嵌套:
1.解決滑動沖突:內(nèi)層嵌套的滑動widget設(shè)置physics:NeverScrollableScrollPhysics()
2.解決滑動嵌套ui顯示不出來或者報錯,內(nèi)層的滑動widget設(shè)置shrinkWrap:true
十一.使用multi_image_picker: ^4.3.4安卓運行報錯Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"
1.需要android工程支持androidx,需要在android工程的gradle.properties內(nèi)添加android.enableJetifier=true和android.useAndroidX=true并點擊右上角的open for editing in android studio,運行成功后就可以了
十二.使用textfield時的文字ui總是很高
使用了maxlength且只是在textfield的InputDecoration設(shè)置counterStyle的顏色為透明使下面的計數(shù)文字消失會導(dǎo)致文字ui很高,counter的計數(shù)文字只是顏色是透明但依然在布局中占了位置所以導(dǎo)致文字很高,直接使用counterText:""即可
十三.使用ListView報錯Vertical viewport was given unbounded height
需要將ListView放入Expanded內(nèi)部
下面這種情況下,為 InkWell 設(shè)置的 splashColor 不會生效:
需要用 Material 去除背景色,然后將顏色設(shè)置在 InkWell 外部:
在 Dialog builder 中使用 WillPopScope 禁用返回鍵返回:
注意:使用此方法同時也會禁用 iOS 上的手勢滑動返回功能,推薦判斷平臺后再使用。
修改對話框中的復(fù)選框狀態(tài),最簡便的方法是通過 Element 中的 markNeedsBuild 方法:
當然,更推薦的做法是通過 StatefulBuilder ,然后就可以在 Dialog 中調(diào)用 setState 方法了,不過在調(diào)用 setState 時需要判斷 Dialog 是否已經(jīng)關(guān)閉,否則會造成 setState() called after dispose() 的錯誤,可以通過添加一個標志位來解決,如下:
在 Web 中加載網(wǎng)絡(luò)圖片有時會失敗,遇到這樣的報錯: Exception caught by image resource service... ,造成該錯誤的原因通常是,圖片跨域了(見 跨域資源共享 )。最簡單的解決辦法是, 使用 HTML 渲染加載 ,而不是默認的 CanvasKit。
Flutter 中所有的 list 默認都是沒有 ScrollBar 的,必須使用 ScrollBar 組件。ScrollBar 組件通過監(jiān)聽 ScrollView 的 ScrollNotification 來刷新位置,所以 List 的長度必須是固定的。
當使用 WebView 等高度不定的組件時會出現(xiàn)內(nèi)容被截斷的情況,通??梢允褂?NestedScrollView 來解決該問題,需要在 WebView 外部嵌套 SingleChildScrollView。
雖然使用了緩存,而且也是用 builder 加載圖片的,但是發(fā)現(xiàn)一個現(xiàn)象:滑動屏幕后圖片短暫消失并重新加載了。圖片高度很高時這種現(xiàn)象更加明顯,其原因是超出屏幕范圍一定距離的組件被重新渲染了。解決方法是在 ListView 上設(shè)置 cacheExtent 參數(shù):
該參數(shù)的作用是改變超出屏幕高度后繼續(xù)渲染的范圍(以像素為單位),比如設(shè)置成 9999 后意味著超出屏幕 10000 像素以內(nèi)的內(nèi)容都會被保留下來。
借助 IntrinsicHeight 組件:
另外,IntrinsicHeight 還可以用于 Dialog 或者 BottomSheet 中,使得其中的元素 顯示內(nèi)在元素的高度 ,從而避免元素因為約束的存在而不顯示或者高度太高(比如在使用了 Column 或者 Row 的時候)。
在通過 Uri 的 queryParameters 獲取 query 參數(shù)時,發(fā)現(xiàn)有些鏈接會拋出下面異常:
造成該異常的原因是 Uri 默認使用 utf-8 解碼超鏈接字符串,如果鏈接中包含非 utf-8 字符,就會造成上面的錯誤,相關(guān) issue 見: issue #31621 。目前該 issue 處于 open 的狀態(tài),暫時的解決辦法是,在所有使用到 queryParameter 的地方用 try..catch 捕捉可能拋出的異常。
Flutter 開發(fā)非常依賴各種官方或第三方的插件,而在使用這些插件時多少都會遇到一些問題,大部分問題都可以通過搜索和查找 issue 來解決。這里記錄下一些我在使用部分插件時遇到的問題及其解決方法。
目前該庫沒有圖片加載完成的回調(diào)(見 issue #545 ),不過我們可以通過在 imageBuilder 中來添加回調(diào):
這是一個應(yīng)用內(nèi)更新插件,安卓 10 以上安裝時需要在 manifest 中添加以下內(nèi)容:
目前功能最強大的 WebView 插件,基本能滿足絕大部分移動端網(wǎng)頁加載的需求,而且可定制化程度高。
一般通過 CookieManager 修改 Cookie,攔截請求并修改請求對象的 Header 不會生效。
InAppWebViewOptions 的 userAgent 只在 iOS 上生效,而 applicationNameForUserAgent 只在 Android 上生效,所以最好的做法是分平臺設(shè)置 InAppWebViewOptions ,而且需要注意,由于設(shè)置 userAgent 后會覆蓋默認的 UserAgent,所以如果需要在默認的 UserAgent 上添加其它參數(shù),iOS 上需要通過 InAppWebViewController.getDefaultUserAgent() 獲取默認 UserAgent 參數(shù),而 Android 不需要添加。
如果圖片源或者請求是 http 的,為了在 Android 上正常加載請求,必須在 AndroidInAppWebViewOptions 中將 mixedContentMode 設(shè)置為 AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW 。
當我們想要設(shè)置全屏圖片的時候,由于默認的 Constraint 會將圖片居中顯示,所以圖片四周會留有空隙。為了去除這個限制,我們需要 Xcode 中打開 LaunchScreen.storyboard,然后在 View Controller 的 View 和 LaunchImage 上的 Safe Area 去掉。
具體設(shè)置方法:右側(cè) Inspector 面板 Show the Size inspector 解選 Layout Margins 中的 Safe Area Relative Margins,拖動圖片占滿全屏,然后根據(jù) View Controller Scene 的 Warning,更新 Constraint 就可以了。
在集成某些三方庫之后,在使用命令行運行 iOS 模擬器的時候可能會遇到下面這個報錯:
這是因為 iOS 模擬器未來將會兼容 arm64 架構(gòu),但是目前還不支持,所以我們需要修改 Build Setting 使得能夠在 x86_64 的模擬器上運行,操作步驟見 這里 。
在flutter開發(fā)過程中,發(fā)現(xiàn)Android手機在App首頁點擊物理返回按鈕時,App會退出并且再次點開App時會重新啟動,這代表了上次的退出直接殺死了App,和我們平常的退到手機桌面不同,所以開發(fā)了一個單獨插件來處理這種情況。
使用步驟如下:
1、pubspec.yaml文件中引入依賴
2、引用插件
3、使用插件來退出App到桌面,并且保持App后臺運行
可根據(jù)實際情況在_onWillPop方法中處理相關(guān)邏輯,比如連續(xù)兩次點擊物理返回按鈕才退出到桌面等。
在Flutter內(nèi)部機制中,默認使用自動管理導(dǎo)航機制,該機制在Flutter與原生混和開發(fā)情況下,F(xiàn)lutter頁面不一定作為項目的首頁面,所以出現(xiàn)需要在首個Flutter頁面使用導(dǎo)航返回的需求。
Flutter的AppBar中定義有屬性:
該屬性默認為YES,即默認為自動管理導(dǎo)航欄,該情況下其會在非第一個Flutter頁面創(chuàng)建導(dǎo)航返回按鈕,我們在AppBar中將其設(shè)置為false:
并且手動添加導(dǎo)航返回按鈕:
完成
項目地址: 持續(xù)效果更新
flutter 有個onTapUp 事件,字面意思就是 點擊抬起的,會返回 TapUpDetails details ,通過 localPosition 屬性就能獲取到x,y坐標
計算double 并不復(fù)雜,每次點擊的時候記錄下當前的事件戳,只要兩個點擊的時間戳和坐標距離小于自己設(shè)定的閾值,就可以視為雙擊事件
實現(xiàn)雙擊
我們使用OverlayEntry 控件,控件詳細介紹
效果一共有 縮小 → 上移 → 放大 → 消失
第一組動畫(縮小 上移) → 第二組動畫(放大 消失)
flutter 動畫需要兩個類
AnimationController 負責管理動畫
Animation 負責具體值操作
然后通過 Transform.scale 函數(shù)的,對scale值進行改變
補全第一組動畫
現(xiàn)實
項目地址: 持續(xù)效果更新