Flutter 之 裝飾容器DecoratedBox （四十四）

DecoratedBox可以在其子組件繪制前(或后)繪制一些裝飾（Decoration），如背景、邊框、漸變等。

創新互聯主要從事成都網站建設、網站建設、網頁設計、企業做網站、公司建網站等業務。立足成都服務都蘭,10余年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:13518219792

DecoratedBox定義如下：

我們通常會直接使用BoxDecoration類，它是一個Decoration的子類，實現了常用的裝飾元素的繪制。

圓形頭像

圓角頭像

Flutter TextField 文本輸入框的基本屬性及詳解

源碼分析：

分析源碼可得，TextField 是有狀態 StatefulWidget，有豐富的屬性，自定義化較高，實踐中需要合理利用各種回調；

1、光標的相關屬性；cursorColor 為光標顏色，cursorWidth 為光標寬度，cursorRadius 為光標圓角；其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種；

2、textAlign 為文字起始位置，可根據業務光標居左/居右/居中等；注意只是文字開始方向；textDirection 問文字內容方向，從左向右或從右向左；

3、maxLength 為字符長度，設置時默認是展示一行，且右下角有編輯長度與整體長度對比；與 maxLengthEnforced 配合，maxLengthEnforced 為 true 時達到最大字符長度后不可編輯；為 false 時可繼續編輯展示有差別；

4、設置 maxLength 之后右下角默認有字符計數器，設置 TextField.noMaxLength 即可只展示輸入字符數；

5、maxLines 為允許展現的最大行數，在使用 maxLength 時內容超過一行不會自動換行，因為默認 maxLines=1，此時設置為 null 或固定展示行數即可自動換行；區別在于 null 會展示多行，而 maxLines 最多只展示到設置行數；

6、obscureText 是否隱藏編輯內容，常見的密碼格式；

7、enableInteractiveSelection 長按是否出現【剪切/復制/粘貼】菜單；不可為空；

8、keyboardAppearance 為鍵盤亮度，包括 Brightness.dark/light 兩種，但僅限于 iOS 設備；

9、textCapitalization 文字大小寫；理論上 sentences 為每句話第一個字母大寫；characters為每個字母大寫；words 為每個單詞首字母大寫；但該屬性僅限于 text keybord，和尚在本地更換多種方式并未實現，有待研究；

10、keyboardType 為鍵盤類型，和尚理解整體分為數字鍵盤和字母鍵盤等；根據設置的鍵盤類型，鍵盤會有差別；

a. 數字鍵盤

--1-- datetime 鍵盤上可隨時訪問 : 和 /；

--2-- phone 鍵盤上可隨時訪問 # 和 *；

--3-- number 鍵盤上可隨時訪問 + - * /

b. 字母鍵盤

--1-- emailAddress 鍵盤上可隨時訪問 @ 和 .；

--2-- url 鍵盤上可隨時訪問 / 和 .；

--3-- multiline 適用于多行文本換行；

--4-- text 默認字母鍵盤；

11、textInputAction 通常為鍵盤右下角操作類型，類型眾多，建議多多嘗試；

12、autofocus 是否自動獲取焦點，進入頁面優先獲取焦點，并彈出鍵盤，若頁面中有多個 TextField 設置 autofocus 為 true 則優先獲取第一個焦點；

13、focusNode 手動獲取焦點，可配合鍵盤輸入等減少用戶操作次數，直接獲取下一個 TextField 焦點；

14、enabled 設為 false 之后 TextField 為不可編輯狀態；

15、decoration 為邊框修飾，可以借此來調整 TextField 展示效果；可以設置前置圖標，后置圖片，邊框屬性，內容屬性等，會在后續集中嘗試；若要完全刪除裝飾，將 decoration 設置為空即可；

16、inputFormatters 為格式驗證，例如原生 Android 中通常會限制輸入手機號或其他特殊字符，在 Flutter 中也可以借此來進行格式限制，包括正則表達式；使用時需要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最長字符；

b. WhitelistingTextInputFormatter 僅允許輸入白名單中字符；如 digitsOnly 僅支持數字 [0-9]；

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符；如 singleLineFormatter 強制輸入單行；

分析源碼 RegExp("[/]") 可以設置正則表達式；

17、onChanged 文本內容變更時回調，可實時監聽 TextField 輸入內容；

18、controller 文本控制器，監聽輸入內容回調；

19、onTap 點擊 TextField時回調；

20、onEditingComplete 在提交內容時回調，通常是點擊回車按鍵時回調；

21、onSubmit 在提交時回調，不可與 onEditingComplete 同時使用，區別在于 onSubmit 是帶返回值的回調；

問題小結：

當 TextField 設置 enableInteractiveSelection 屬性后長按會出現菜單，默認為英文，可通過設置 Flutter 國際化來處理；

（1）在 pubspec.yaml 中集成 flutter_localizations；

2）在 MaterialApp 中設置本地化代理和支持的語言類型；

（1）將 maxLength 設置為 null 僅使用 LengthLimitingTextInputFormatter 限制最長字符；

（2）設置 InputDecoration 中 decoration 屬性為空；但是底部有空余，只是隱藏而并非消失；

Flutter-Text文本組件

在開發中，文本是我們最常接觸的控件。這篇博客來分享一下 Flutter 中的 Text 文本組件，我們展示的文本都可以用這個組件來展示，希望看文章的小伙伴有所幫助。

這樣我們就可以在界面當中顯示一個文本，顯示是 Hello Flutter 。下面我們來說說 Text 組件的屬性：

設置文本顏色：

設置文本大小：

設置文本樣式-加粗：

設置文本樣式-斜體：

設置文本位置：

TextAlign可選屬性： center 、 end 、 start 、 justify 、 left 、 right 。

設置文本高度：

設置文本最大行數：

設置文本有下劃線：

設置文本有虛線類型下劃線：

設置文字間隔：

文本超過最大行數設置 ... ：

Flutter（6）：基礎組件之Image

Image是一個用于展示圖片的組件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。

Image.asset - 用于從資源目錄的顯示圖片,需要在 pubspec.yaml 文件中聲明。

Image.network - 用于從網絡上顯示圖片。

Image.file - 用于從文件里顯示圖片。

Image.memory - 用于從內存里（Uint8List）顯示圖片。

alignment → AlignmentGeometry - 圖像邊界內對齊圖像。

centerSlice → Rect - 九片圖像的中心切片。

color → Color - 該顏色與每個圖像像素混合colorBlendMode。

colorBlendMode → BlendMode - 用于 color 與此圖像結合使用。

fit → BoxFit - 圖像在布局中分配的空間。

gaplessPlayback → bool - 當圖像提供者發生變化時，是繼續顯示舊圖像（true）還是暫時不顯示（false）。

image → ImageProvider - 要顯示的圖像。

matchTextDirection → bool - 是否在圖像的方向上繪制圖像 TextDirection。

repeat → ImageRepeat - 未充分容器時，是否重復圖片。

height → double - 圖像的高度。

width → double - 圖像的寬度。

加載資源圖片需要將圖片資源放入工程中，例如：新建images文件夾，將圖片放在該文件夾下，圖片適配則是使用ios的方式1X，2X，3X：

然后在pubspec.yaml中配置assets：

加載資源/網絡/本地文件圖片/內存圖片：

占位圖加載圖片：

圓形圖片：1.裁剪實現 2.CircleAvatar實現 3.Container邊框實現

圓角圖片：1.裁剪實現 2.Container邊框實現

BoxFit.contain 全圖居中顯示但不充滿，顯示原比例

BoxFit.cover 圖片可能拉伸，也可能裁剪，但是充滿容器

BoxFit.fill 全圖顯示且填充滿，圖片可能會拉伸

BoxFit.fitHeight 圖片可能拉伸，可能裁剪，高度充滿

BoxFit.fitWidth 圖片可能拉伸，可能裁剪，寬度充滿

BoxFit.scaleDown 效果和contain差不多， 但是只能縮小圖片，不能放大圖片

下一節學習基礎組件之Text

Flutter基礎Widget之按鈕（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中給我們預先定義好了一些按鈕控件給我們用，常用的按鈕如下

我們先來看看MaterialButton中的屬性，可以看到能設置的屬性還是很多的。

下面我們來看看常用屬性

而在Android中如果我們要修改按鈕樣式的話，需要通過selector和Shape等方式進行修改，相比較Flutter來說是要麻煩不少的

RaisedButton的構造方法如下，由于繼承自MaterialButton，所以MaterialButton中的大多數屬性這邊都能用，且效果一致，這里就不在贅述了

下面我們來看一下屬性

接收一個方法，點擊按鈕時回調該方法。如果傳null，則表示按鈕禁用

如下圖所示

按鈕文本控件，一般都是傳一個Text Widget

按鈕顏色

按鈕的文本顏色

點擊按鈕時水波紋顏色

高亮顏色，點擊（長按）按鈕后的顏色

陰影范圍，一般不會設置太大

內邊距,使用

或者

shape用來設置按鈕的形狀，其接收值是ShapeBorder類型，ShapeBorder是一個抽象類，我們來看看有哪些實現類

可以看到，實現類還是很多的，我們主要來看看常用的即可。

borderRadius 接收一個BorderRadius類型的值，常用方法如下

我們可以把borderRadius分為上下左右四個方向，下面的方法都是對這四個方向進行設置，

帶斜角的長方形邊框

圓形邊框

圓角矩形

兩端是半圓的邊框

FlatButton跟RaisedButton用法基本一致，下面我們就直接用一下

注意，OutlineButton是一個有默認邊線且背景透明的按鈕，也就是說我們設置其邊線和顏色是無效的，其他屬性跟MaterialButton中屬性基本一致

下面我們直接來使用

效果如下：

IconButton是直接繼承自StatelessWidget的，默認沒有背景

我們來看一下他的構造方法

可以看到，icon是必填參數

icon接收一個Widget，但是一般我們都是傳入一個Icon Widget

其他屬性跟MaterialButton中的屬性用法基本一致

我們來用一下

效果如下：

我們也可以傳一個Text或其他Widget，這個大家自行嘗試吧

如果我們需要設置按鈕的最小寬度以及高度，button屬性中并沒有提供對應的設置方法

使用如下：

Flutter中Button內容大概就是這些

Flutter用邊框實現三角形 2022-06-06 周一

Flutter和前端一樣，采用盒模型。

前端中有用CSS，只用邊框實現三角形的案例，這個可以借鑒過來

2018-04-14 借助邊框特性實現邊框三角形

flutter 中用邊框實現三角形

web前端入門到實戰：通過CSS邊框實現三角形和箭頭