Flutter踩坑之旅

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

習水網站制作公司哪家好，找創新互聯公司！從網頁設計、網站建設、微信開發、APP開發、自適應網站建設等網站項目制作，到程序開發，運營維護。創新互聯公司2013年開創至今到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯公司。

一.TextField:

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

2.去掉獲取和失去焦點時邊框改變顏色的效果:decoration內border: InputBorder.none,

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

4.設置背景色需要在decoration內 ? ? filled:true, ? fillColor: Colors.blue同時設置才會顯示

二.Uint8List類型和string類型,Listint的轉換

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

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

三.報錯:DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

這是因為dio請求返回的數據默認是以json的格式讀取的,而返回的數據是密文形式,需要修改dio的Options的responseType為ResponseType.PLAIN,這樣返回的數據就以字符串形式處理.

四.去掉點擊控件背景出現的水波紋效果,即去掉md的效果:

在main.dart的MaterialApp內的theme加上splashColor: Colors.transparent

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

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

布局設置double.infinity占滿全屏高度卻無效,大部分情況都是因為某一級的父布局的高度已經有了限制,所以設置充滿屏幕只會充滿父布局,有些widget默認是按內容填充類似wrap_content就會導致寫布局的過程中自己沒有限制高度但最后的布局不是自己想要的,可以給各個父布局設置不同背景顏色來查看是從哪兒開始被限制了高度來排查問題.

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

七.LinearProgressIndicator

1.LinearProgressIndicator設置進度值的顏色為單一顏色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))

2.給LinearProgressIndicator設置圓角:ClipRRect(

borderRadius:BorderRadius.circular(60.0),

child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),

)

八.Expanded:

1.若嵌套多層column且內容的高度都不確定需要占滿剩余空間,需要每層的column的內容都嵌套一層expanded來申明每層都占滿剩余的空間,否則最里面的內容層需要指定高度,不然會報錯

九.Container設置最小/大寬度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑動的widget嵌套:

1.解決滑動沖突:內層嵌套的滑動widget設置physics:NeverScrollableScrollPhysics()

2.解決滑動嵌套ui顯示不出來或者報錯,內層的滑動widget設置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓運行報錯Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

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

十二.使用textfield時的文字ui總是很高

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

十三.使用ListView報錯Vertical viewport was given unbounded height

需要將ListView放入Expanded內部

flutter 設置圓角的兩種方式

ClipOval例子(默認全圓角):

new ClipOval(

? ? ? ? child: Container(

? ? ? ? ? width: 100,

? ? ? ? ? height: 100,

? ? ? ? ? color: Colors.red,

? ? ? ? ),

? ? ? ),

ClipRRect例子(可自定義圓角):

new ClipRRect(

? ? ? ? borderRadius: BorderRadius.circular(50),

? ? ? ? child: Container(

? ? ? ? ? width: 100,

? ? ? ? ? height: 100,

? ? ? ? ? color: Colors.red,

? ? ? ? ),

? ? ? )

Flutter ClipRect 使用介紹

ClipRect控件默認是通過限制子widget的繪制區域來達到裁剪的效果的，通過custom clipper，可以自定義裁剪的大小跟坐標

ClipRect的定義如下

ClipRect class默認是沒有任何裁剪效果的，需要通過clipper參數告訴ClipRect如何去裁剪，clipper是個CustomClipper類型，CustomClipper是個抽象接口類，我們通過繼承CustomClipper，重寫 getClip 方法可以定義一個裁剪區域，通過重寫 shouldReclip 方法來告訴ClipRect當一個新的clipper被設置了是否需要更新裁剪區域，譬如開始設置的clipper裁剪坐標是從(10,10)開始的，新設置的clipper裁剪坐標是(20,20)，那么shouldReclip需要返回true來通知ClipRect更新裁剪區域。

下面這個例子從網絡上加載一張圖片，并且進行裁剪，裁剪坐標是(10,10) 裁剪的寬高是圖片的寬高減去10

效果如下

Flutter圓角設置組件

flutter能設置圓角的組件：ClipRRect、ClipOval、CircleAvatar、BoxDecoration BorderRadius.circular、BoxDecoration BoxShape.circle

1.ClipRRect：將 child 剪裁為寬高相等的圓角組件，可設置圓角度數

2.ClipOval： 將child裁剪為寬高相等的圓角組件（只包括圓形和橢圓形），不可設置圓角度數

3.CircleAvatar：只能設置自身圓形，不能裁剪child

4.BoxDecoration BorderRadius.circular 設置自身圓角,不能裁剪child

4.BoxDecoration BoxShape.circle 只能設置自身為圓形，不能裁剪child

參考： flutter 圓角設置

Flutter自定義繪制組件

Flutter中自定義組件一般有兩種方式：

CustomPaint繼承自SingleChildRenderObjectWidget，即它可以在通過嵌套引入到widget樹中，并且可以有一個child子widget。它的構造方法如下：

painter和foregroundPainter需要接收CustomPainter對象，是CustomPaint核心。CustomPainter是進行UI繪制的核心類，繪制時, CustomPaint 首先在畫布上調用 painter繪制 , 然后再繪制它的 child Widget, child 繪制完成后再調用 foregroundPainter 進行繪制。

size屬性標識繪制區域大小，但當CustomPaint有child，該屬性將會忽略，而使用child的大小為繪制區域大小。

isComplex和willChange用于控制繪制層緩存處理的，這里暫不討論。

可實現CustomPainter子類進行UI繪制

實現paint方法進行真正的繪制，canvas是畫布對象，size是繪制區域，是從CustomPaint中size屬性傳遞得到的。繪制過程與Android原生開發十分類似，連API都十分相像，這點對熟悉Android原生開發者真是太友好了。

Paint對象是畫筆對象，就是繪圖工具，我們可以設置畫筆的顏色、粗細、是否抗鋸齒、筆觸形狀以及作畫風格等，通過這些屬性我們可以很方便的來定制自己的UI效果，在繪制的過程中可以定義多個畫筆，以便實現多種風格圖形的集合。

根據需求選擇合適的畫筆屬性，完成你的繪制。

Canvas是繪制的畫布，它包含了很多繪制方法，可以繪制出各種形狀的圖形。需要注意的是，畫布是應用所有控件都在使用的, 所以通過這個畫布其實是可以繪制充滿屏幕的內容的，每次繪制都應該限制在本控件的區域(Size)內, 以免繪制覆蓋到其他組件。

下面介紹下Canvas的繪制方法：

PointMode是個枚舉

p1、p2為線段兩個端點

Rect定義矩形的大小位置，有多種構造方式:

RRect描述圓角矩形，他通過Rect和Radius來構造

畫圓比較簡單，c表示圓心位置，radius是半徑。

橢圓使用外接矩形確定大小位置，rect就是外接矩形。

繪制弧形，先確定弧形對應的橢圓，同樣地用外接矩形rect確定橢圓，然后根據起始點和結束點角度來確定那一段弧度，startAngle，sweepAngle分別代表起始和結束點角度，角度用弧度表示法。

useCenter表示是否連接閉合形狀，userCenter = false表示不閉合，即畫一段弧線，userCenter = true表示閉合，即繪制一個扇形。

繪制路徑，關鍵在于構建路徑Path，可以直接new Path對象，然后通過path方法可以連接出圖形，path關鍵方法如下：

還有其他方法，有興趣可以查看API。

Flutter 56: 圖解自定義 BubbleWidget 氣泡插件

小菜在學習時需要用到氣泡效果，為了更加靈活，小菜封裝了一個簡單的 flutter_bubble 氣泡插件，方便日常的使用；

小菜準備用 Canvas 的 drawPath 進行繪制，主要分為三個部分，圓角弧線，普通直線，尖角折線，均可由 drawPath 自帶方法繪制；小菜以前整理過關于 Canvas 繪制的小博客，實現很簡單；

小菜繪制了一個簡陋的原型圖，整體黑框為 Bubble Widget 整體范圍；藍色圓弧為圓角位置；紅色尖角可根據上下左右參數進行配置，且只可展示一個，尖角的高度和角度可自由配置，當確定一個尖角位置時，其余三個方向寬高延伸到黑框部分；而橙線則是連接圓角與尖角等直線；中間空余部分為子 Widget 位置； Tips: Child Widget 寬高小于等于 Bubble Widget ；

首先在邊角處繪制四個圓弧，直接用 arcTo 即可，需要注意的是：小菜整體以 drawPath 方式實現，準備從左上角開始順時針繪制，所以繪制圓弧時也是順時針方向；

小菜理解， Rect 為繪制圓角的矩形，包括位置及大小； startAngele 為起始角度； sweepAngle 為繪制弧形角度；小菜需要的四個圓弧大小均為 pi/2 ，只需調整矩形位置與起始角度即可；

其次繪制尖角，小菜的尖角是由 lineTo 兩段直線拼接起來的，只需要處理起點與終點即可；小菜為了更加靈活，可以設置尖角高度與尖角角度(0 ~ 180)，通過三角函數進行計算；

最后就是將處理好的連接起來，小菜為了適應更多場景，尖角位置也可自由配置，長度為到圓角的距離，默認為邊框中間位置；

小菜將配置邏輯編輯好發布到 Pub 庫，基本 BubbleWidget 便完成，簡單分析一下可配置項；

自定義 Bubble Widget 是小菜發布的第二款 Pub 插件，還有很多不完善的地方，如有錯誤請多多指導！

本文標題：包含flutterrect的詞條
網站鏈接：http://vcdvsql.cn/article28/dsdeojp.html

成都網站建設公司_創新互聯，為您提供網站制作、小程序開發、移動網站建設、軟件開發、電子商務、App開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯