一文解決Flutter中使用TextField遇到的各種疑難雜癥

可以使用 SingleChildScrollView 包裹布局

創(chuàng)新互聯(lián)是一家專業(yè)從事成都網(wǎng)站建設(shè)、成都網(wǎng)站制作的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站設(shè)計(jì)公司,創(chuàng)新互聯(lián)依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都全網(wǎng)營銷推廣及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

這里還需要了解一個(gè) Scaffold 中的一個(gè)屬性 resizeToAvoidBottomInset

官方文檔給出的解釋就是處理鍵盤遮擋問題，默認(rèn)是 true，如果不希望頂起需要設(shè)置為 false。

在 sdk 低版本的時(shí)候是使用 resizeToAvoidBottomPadding 需要將其設(shè)置為 false，現(xiàn)在已經(jīng)棄用。但網(wǎng)上很多文章還沒有改正，仍然用的 resizeToAvoidBottomPadding。

分兩種情況

一種是使用系統(tǒng)的返回鍵，比如 android 底部導(dǎo)航自帶的返回，

另一種是使用導(dǎo)航欄自定義的返回鍵

第一種情況需要在頁面根布局使用 WillPopScope 在 onWillPop 中攔截返回處理。

原理都是通過判斷輸入框是否獲取了焦點(diǎn)

當(dāng)?shù)撞坑泄潭ǖ慕M件，比如提交按鈕，我們?cè)阪I盤彈起的時(shí)候希望按鈕貼著鍵盤頂部固定，但是中間滾動(dòng)視圖可以自由滾動(dòng)

可以在 SingleChildScrollView 外部再使用 Stack 包裹，懸浮按鈕使用 Positioned 定位，

還要??注意要給滾動(dòng)組件底部留出距離防遮擋，同時(shí)還有動(dòng)態(tài)加上 bottomBar 的高度，因?yàn)樵?iphoneX 以上的手機(jī)，會(huì)有個(gè)虛擬按鍵，如果不加上該按鍵高度，同樣會(huì)被遮擋

高度獲取方法： MediaQuery.of(context).padding.bottom

在 showDialog 布局中使用 Scaffold 包裹，不要忘了將 backgroundColor 設(shè)為透明。

如果彈窗過高，還是需要將高度固定，然后使用 SingleChildScrollView ，彈窗中同樣也可以在執(zhí)行關(guān)閉的時(shí)候攔截，判斷鍵盤是否彈起，如果彈起則要先關(guān)閉鍵盤。

給所有輸入框綁定 FoucusNode

在 maxLines=1 的情況下，輸入框不支持換行，換行按鈕會(huì)變成 done

監(jiān)聽 onEditingComplete 方法

根布局使用 GestureDetector 或者 InkWell 包裹，點(diǎn)擊的時(shí)候收起鍵盤。

最后要記得銷毀

Flutter 設(shè)置顏色Color透明度

color: Color(0xFF5e12a9）

00%=FF（不透明）

5%=F2

10%=E5

15%=D8

20%=CC

25%=BF

30%=B2

35%=A5

40%=99

45%=8c

50%=7F

55%=72

60%=66

65%=59

70%=4c

75%=3F

80%=33

85%=21

90%=19

95%=0c

100%=00（全透明）

參考原文鏈接：

Flutter踩坑之旅

記錄下自己踩過的坑,怕忘了

一.TextField:

1.去掉輸入數(shù)字的計(jì)數(shù):decoration中的counterStyle: TextStyle(color: Colors.transparent).

2.去掉獲取和失去焦點(diǎn)時(shí)邊框改變顏色的效果:decoration內(nèi)border: InputBorder.none,

3.去邊框時(shí)設(shè)置BorderSide的width為0或color: Colors.transparent后依然存在邊框時(shí),需要設(shè)置為borderSide: BorderSide.none

4.設(shè)置背景色需要在decoration內(nèi) ? ? filled:true, ? fillColor: Colors.blue同時(shí)設(shè)置才會(huì)顯示

二.Uint8List類型和string類型,Listint的轉(zhuǎn)換

連續(xù)兩次base64解碼時(shí),參數(shù)只能使用string類型,但是base64解碼后是Uint8List類型,此時(shí)需要將Uint8List類型轉(zhuǎn)換為string類型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';

Listint轉(zhuǎn)Uint8List:讀取接口時(shí)獲取的數(shù)據(jù)是Listint的圖片數(shù)據(jù),想顯示時(shí)需要轉(zhuǎn)成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可

三.報(bào)錯(cuò):DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

這是因?yàn)閐io請(qǐng)求返回的數(shù)據(jù)默認(rèn)是以json的格式讀取的,而返回的數(shù)據(jù)是密文形式,需要修改dio的Options的responseType為ResponseType.PLAIN,這樣返回的數(shù)據(jù)就以字符串形式處理.

四.去掉點(diǎn)擊控件背景出現(xiàn)的水波紋效果,即去掉md的效果:

在main.dart的MaterialApp內(nèi)的theme加上splashColor: Colors.transparent

五.布局去掉沉浸式效果和布局設(shè)置占滿全屏卻無效的問題

使用Scaffold的body的布局默認(rèn)是沉浸式的,將狀態(tài)欄一起包含了,可以通過在body后添加一層SafeArea即可.

布局設(shè)置double.infinity占滿全屏高度卻無效,大部分情況都是因?yàn)槟骋患?jí)的父布局的高度已經(jīng)有了限制,所以設(shè)置充滿屏幕只會(huì)充滿父布局,有些widget默認(rèn)是按內(nèi)容填充類似wrap_content就會(huì)導(dǎo)致寫布局的過程中自己沒有限制高度但最后的布局不是自己想要的,可以給各個(gè)父布局設(shè)置不同背景顏色來查看是從哪兒開始被限制了高度來排查問題.

六.占滿剩余空間,類似android的match_parent可以使用double.infinity

七.LinearProgressIndicator

1.LinearProgressIndicator設(shè)置進(jìn)度值的顏色為單一顏色: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)容層需要指定高度,不然會(huì)報(bào)錯(cuò)

九.Container設(shè)置最小/大寬度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑動(dòng)的widget嵌套:

1.解決滑動(dòng)沖突:內(nèi)層嵌套的滑動(dòng)widget設(shè)置physics:NeverScrollableScrollPhysics()

2.解決滑動(dòng)嵌套u(yù)i顯示不出來或者報(bào)錯(cuò),內(nèi)層的滑動(dòng)widget設(shè)置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓運(yùn)行報(bào)錯(cuò)Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

1.需要android工程支持androidx,需要在android工程的gradle.properties內(nèi)添加android.enableJetifier=true和android.useAndroidX=true并點(diǎn)擊右上角的open for editing in android studio,運(yùn)行成功后就可以了

十二.使用textfield時(shí)的文字ui總是很高

使用了maxlength且只是在textfield的InputDecoration設(shè)置counterStyle的顏色為透明使下面的計(jì)數(shù)文字消失會(huì)導(dǎo)致文字ui很高,counter的計(jì)數(shù)文字只是顏色是透明但依然在布局中占了位置所以導(dǎo)致文字很高,直接使用counterText:""即可

十三.使用ListView報(bào)錯(cuò)Vertical viewport was given unbounded height

需要將ListView放入Expanded內(nèi)部

Flutter筆記(三)：設(shè)置白色狀態(tài)欄

在App設(shè)計(jì)中狀態(tài)欄純色的這種設(shè)計(jì)很常見，但是如果狀態(tài)欄需要為白色的時(shí)候就必須為黑色字體。在Android中已經(jīng)有很多成熟的方案來處理這種情況，那我們現(xiàn)在看看在Flutter中這種情況該怎么處理。

這里的ThemeData即為控制App的主題，primarySwatch設(shè)置即可控制主題的各類顏色，但是這里的顏色是需要MaterialColor，但是純色種的黑色和白色不是MaterialColor。所以不能設(shè)置primarySwatch為Colors.white。

注：MaterialColor包含以下這些

那么就只能使用其他方式設(shè)置主題為白色。即為設(shè)置

此時(shí)我們可以看到App的狀態(tài)欄如下所示（Android）

雖然AppBar變成了白色，但是狀態(tài)欄是灰色顯然不是我們想要的。

嘗試設(shè)置文字顏色，AppBar的Brightness有兩種模式light和dark

這個(gè)和SystemUiOverlayStyle的light和dark剛好相反

然后設(shè)置狀態(tài)欄顏色

設(shè)置為紅色之后，得到以下的樣式，可以看到狀態(tài)欄為紅色了，文字為白色

那么接下來我們只需要將狀態(tài)欄設(shè)置為白色或者透明，狀態(tài)欄文字設(shè)置為黑色。

最后得到以下視圖

注：使用PreferredSize包裹，可以更得心應(yīng)手哦！

SystemUiOverlayStyle在設(shè)置時(shí)其實(shí)有很多系統(tǒng)或者版本的限制

[Flutter]使用主題

flutter設(shè)置沉浸式狀態(tài)欄

）

網(wǎng)站名稱：flutter設(shè)置透明,fluent透明
當(dāng)前URL：http://chinadenli.net/article9/dsigjih.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、建站公司、企業(yè)建站、商城網(wǎng)站、微信小程序、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)