在Flutter中，UI小控件有兩種設計風格，一種是Material設計，這是安卓的官方設計風格，另一種則是Cupertino風格，是iOS的官方設計風格。因此，當遇到帶有這兩個單詞開頭的控件時，我們應該明確他們表達的意思。

• 官方Widgets 介紹文檔

• 官方Widgets API文檔

• 中文 Widgets 介紹文檔

控件簡述

Text	文本控件
Image	圖片控件
Icon	圖標控件
SelectableText	可選文本控件
TextField	文本輸入框
MaterialButton	Material(安卓)風格按鈕
RaisedButton	凸起的按鈕
FlatButton	扁平的按鈕
IconButton	圖標按鈕
CupertinoButton	Cupertino(iOS)風格按鈕
OutlineButton	線框按鈕
Radio	單選框
Checkbox	多選框
Chip	碎片控件
Slider	滑塊控件
CupertinoSlider	iOS 風格滑塊控件
Switch	開關控件
CupertinoSwitch	iOS 風格開關控件
Placeholder	占位控件

Text

屬性名類型簡述

data	String	需要顯示的文本字符串
style	TextStyle	文本顯示的樣式
textAlign	TextAlign	文本對齊方式
textDirection	TextDirection	文本顯示方向
softWrap	bool	是否自動換行
overflow	TextOverflow	溢出處理。clip：剪輯溢出的文本；fade：將溢出的文本淡化為透明；ellipsis：用省略號表示溢出；visible：在容器之外顯示溢出的文本
textScaleFactor	double	每個邏輯像素的字體像素值。簡單說就是字體縮放系數
maxLines	int	文本最多可顯示的行數。如果文本超過給定的行數，則根據溢出規則截斷
textSpan	TextSpan	以TextSpan方式顯示文本。需使用Text.rich構造方法創建

Image

構造方法

• Image : 從ImageProvider中獲取圖片
• Image.asset ：加載資源目錄中的圖片
• Image.network：加載網絡圖片
• Image.file：加載本地圖片文件
• Image.memory：加載Uint8List資源圖片

屬性名類型簡述

image	ImageProvider	用于自定義圖片控件的情況
width/height	double	設置Image控件自身的寬高
fit	BoxFit	圖片的填充模式
color	Color	圖片顏色
colorBlendMode	BlendMode	對圖片進行混合顏色處理，有多種值可選
alignment	Alignment	設置圖片的對齊位置
repeat	ImageRepeat	設置圖片的重復填充方式
centerSlice	Rect	類似與Android中的點9處理，在圖片上定義某個矩形區域用于拉伸，這9個點其實就是八個方向加上正中
gaplessPlayback	bool	當ImageProvider發生變化時，顯示新圖片的過程中，如果值為true則保留舊圖片直至顯示出新圖片為止；如果false，則不保留舊圖片，直接空白等待下一張圖片的加載

//?直接構造

BoxFit 填充模式

文檔地址

取值簡述

BoxFit.contain	顯示整張圖片，按照原始比例縮放顯示
BoxFit.fill	顯示整張圖片，拉伸填充全部可顯示區域
BoxFit.cover	按照原始比例縮放，可能裁剪，填滿可顯示區域
BoxFit.fitHeight	按照原始比例縮放，可能裁剪，高度優先填滿
BoxFit.fitWidth	按照原始比例縮放，可能裁剪寬度優先填滿
BoxFit.none	圖片居中顯示，不縮放原圖
BoxFit.scaleDown	顯示整張圖片，只能縮小或者原圖顯示

TextField

屬性名類型簡述

controller	TextEditingController	輸入框的控制器，通常用于獲取輸入的內容
focusNode	FocusNode	用于輸入框的焦點管理和監聽
decoration	InputDecoration	輸入框的裝飾器，用于修改外觀
keyboardType	TextInputType	設置輸入類型，不同的輸入類型鍵盤會不一樣
textInputAction	TextInputAction	用于設置鍵盤動作(一般位于右下角，默認是完成)
textCapitalization	TextCapitalization	配置平臺鍵盤如何選擇大寫或小寫鍵盤。
style	TextStyle	文本樣式
textAlign	TextAlign	文本位置
textDirection	TextDirection	文本顯示方向
autofocus	bool	是否自動獲取焦點
obscureText	bool	是否隱藏輸入的文字，通常用于密碼框
autocorrect	bool	是否自動校驗
maxLines	int	最大行數
maxLength	int	輸入的最大字符數
maxLengthEnforced	bool	配合maxLength使用，達到最大長度時是否阻止輸入
onChanged	ValueChanged	輸入文本發生變化時回調
onEditingComplete	VoidCallback	點擊鍵盤完成按鈕時觸發的回調，無參數
onSubmitted	ValueChanged	點擊完成按鈕時觸發的回調，該回調有參數，參數即為輸入的值
inputFormatters	List	對輸入文本的校驗
cursorWidth	double	光標的寬度
cursorRadius	Radius	光標的圓角
cursorColor	Color	光標的顏色
keyboardAppearance	Brightness	鍵盤的外觀，僅在iOS設備上支持
onTap	GestureTapCallback	點擊輸入框時的回調
enabled	bool	輸入框是否可用
readOnly	bool	是否只讀

裝飾器 InputDecoration

屬性名類型簡述

icon	Widget	設置位于輸入框前的圖標
labelText	String	設置描述輸入框的標簽
labelStyle	TextStyle	設置labelText的樣式
helperText	String	幫助文本，位于輸入框下方，如果errorText為空則不會顯示
helperStyle	TextStyle	設置helperText的樣式
hintText	String	提示文本，位于輸入框內部
hintStyle	TextStyle	hintText的樣式
hintMaxLines	int	提示文本最大行數
errorText	String	錯誤文本信息提示
errorStyle	TextStyle	errorText的樣式
hasFloatingPlaceholder	bool	labelText是否浮動，默認為true
isDense	bool	輸入框是否為密集型，默認為false，為true時，圖標及間距會變小
contentPadding	EdgeInsetsGeometry	內間距
isCollapsed	bool	是否裝飾的大小與輸入字段的大小相同。
prefixIcon	Widget	位于輸入框內部起始位置的圖標
prefix	Widget	預先填充的Widget，跟prefixText只能同時出現一個
prefixText	String	預填充的文本，例如手機號前面預先加上區號等
prefixStyle	TextStyle	prefixText的樣式
suffixIcon	Widget	位于輸入框尾部的圖標
suffix	Widget	位于輸入框尾部的控件
suffixText	String	位于尾部的填充文字
suffixStyle	TextStyle	suffixText的樣式
counter	Widget	輸入框右下方的計數小控件，不能和counterText同時使用
counterText	String	右下方顯示的文本，常用于顯示輸入的字符數量
counterStyle	TextStyle	counterText的樣式
filled	bool	如果為true，則使用fillColor指定的顏色填充
fillColor	Color	輸入框的背景顏色
errorBorder	InputBorder	errorText不為空，且輸入框沒有焦點時要顯示的邊框
focusedBorder	InputBorder	輸入框有焦點時的邊框，errorText必須為空
focusedErrorBorder	InputBorder	errorText不為空時，輸入框有焦點時的邊框
disabledBorder	InputBorder	輸入框禁用時顯示的邊框，errorText必須為空
enabledBorder	InputBorder	輸入框可用時顯示的邊框，errorText必須為空
border	InputBorder	正常情況下的邊框
enabled	bool	輸入框是否可用

border的三種值

• InputBorder.none 沒有邊框
• OutlineInputBorder 線框
• UnderlineInputBorder 底邊線，默認的

TextField(
??????decoration:?InputDecoration(
????????border:?OutlineInputBorder(
??????????borderRadius:?BorderRadius.all(
????????????Radius.circular(30),?//?圓角
??????????),
??????????borderSide:?BorderSide(
????????????color:?Colors.amber,?//線框顏色為黃色
????????????width:?2,????????????//線框寬度為2
??????????),
????????),

????????labelText:?"labelText",
????????helperText:?"helperText",
????????hintText:?"hintText",
????????prefixIcon:?Icon(Icons.perm_identity),
??????),
????);

小技巧

當輸入框的默認線框無法滿足時，可以使用Container容器自定義邊框。這時候可以將裝飾器設置為InputDecoration.collapsed(hintText: 'hint')表示禁用裝飾線

輸入校驗 ?TextInputFormatter

inputFormatters屬性需要我們提供一個TextInputFormatter 類型的列表，該類有三個子類提供我們使用

• WhitelistingTextInputFormatter 白名單校驗，只允許輸入符合規則的字符
• BlacklistingTextInputFormatter 黑名單校驗，除了限定的字符其他的都可以輸入
• LengthLimitingTextInputFormatter 長度限制，與maxLength作用類似

前兩個在實際使用時，其實是使用的Dart中正則表達式

///?黑名單校驗?+?長度限制

Button

Button的通用屬性

屬性名類型簡述

onPressed	VoidCallback	點擊事件監聽
onLongPress	VoidCallback	長按事件監聽
onHighlightChanged	ValueChanged	水波紋高亮變化回調,按下返回true,抬起返回false
textTheme	ButtonTextTheme	定義按鈕主題
textColor	Color	按鈕文字顏色
disabledTextColor	Color	禁用按鈕時文字顏色
color	Color	按鈕顏色
disabledColor	Color	禁用按鈕時顏色
focusColor	Color	獲取焦點時按鈕顏色
splashColor	Color	水波紋效果的初始化顏色
hoverColor	Color	當指針懸停在按鈕上時的填充顏色
highlightColor	Color	水波紋的高亮顏色
elevation	double	陰影高度
hoverElevation	double	指針懸停在按鈕上時的陰影
focusElevation	double	獲取焦點時的陰影
highlightElevation	double	高亮時的陰影
disabledElevation	double	禁用時的陰影
colorBrightness	Brightness	用于此按鈕的主題亮度
child	Widget	子控件
enabled	bool	是否禁用按鈕
padding	EdgeInsetsGeometry	內邊距
shape	ShapeBorder	設置形狀
clipBehavior	Clip	剪裁
focusNode	FocusNode	用于焦點管理和監聽
autofocus	bool	是否自動獲取焦點
animationDuration	Duration	設置按鈕形狀和陰影變化的持續時間
materialTapTargetSize	MaterialTapTargetSize	配置點擊目標的最小大小
minWidth	double	按鈕最小寬度
height	double	按鈕高度
enableFeedback	bool	是否開啟按鈕觸覺反饋

????RaisedButton(
??????child:?Text('凸起按鈕'),
??????onPressed:?(){},
??????color:?Colors.blue[200],
??????splashColor:Colors.yellow[100],
????),

????FlatButton(
??????child:?Text('扁平按鈕'),
??????onPressed:?(){},
??????color:?Colors.blue[200],
????),

????OutlineButton(
??????child:?Text('線框按鈕'),
??????onPressed:?(){},
??????textColor:?Colors.red,
??????borderSide:?BorderSide(color:?Colors.red,),
????),

Radio 與 ?Checkbox

Radio

屬性名類型簡述

value	動態類型	此單選按鈕表示的值
groupValue	動態類型	該組單選按鈕當前選定的值
onChanged	ValueChanged	狀態變化回調
activeColor	Color	選中時的顏色
materialTapTargetSize	MaterialTapTargetSize	配置點擊目標的最小大小。
focusNode	FocusNode	用于焦點管理和監聽
autofocus	bool	是否自動獲得焦點

????Row(
??????children:?[
????????Radio(
??????????value:?1,
??????????activeColor:?Colors.pink,
??????????groupValue:?this._sex,
??????????onChanged:?(value)?{
????????????setState(()?{this._sex?=?value;
????????????});
??????????},
????????),
????????Text('男'),
????????Radio(
??????????value:?2,
??????????activeColor:?Colors.pink,
??????????groupValue:?this._sex,
??????????onChanged:?(value)?{
????????????setState(()?{this._sex?=?value;
????????????});
??????????},
????????),
????????Text('女'),
??????],
????),

Checkbox

屬性名類型簡述

value	bool	是否選中此復選框
onChanged	ValueChanged	該組單選按鈕當前選定的值
tristate	bool	默認false，如果為true，復選框的值可以為true、false或null
activeColor	Color	選中時的顏色
checkColor	Color	選中時復選框圖標的顏色
materialTapTargetSize	MaterialTapTargetSize	配置點擊目標的最小大小
focusNode	FocusNode	用于焦點管理和監聽
autofocus	bool	是否自動獲得焦點

????Row(
??????children:?[
????????Checkbox(
??????????activeColor:?Colors.pink,
??????????checkColor:?Colors.blue,
??????????value:?this._flag1,
??????????onChanged:?(value)?{
????????????setState(()?{this._flag1?=?value;
????????????});
??????????},
????????),
????????Checkbox(
??????????activeColor:?Colors.pink,
??????????checkColor:?Colors.blue,
??????????value:?this._flag2,
??????????onChanged:?(value)?{
????????????setState(()?{this._flag2?=?value;
????????????});
??????????},
????????),
??????],
????)

Chip

屬性名類型簡述

avatar	Widget	在碎片標簽之前顯示的小控件
label	Widget	碎片的標簽
labelStyle	TextStyle	標簽文字樣式
labelPadding	EdgeInsetsGeometry	標簽文字內間距
shape	ShapeBorder	形狀
clipBehavior	Clip	裁剪。?默認Clip.none(不裁剪)
backgroundColor	Color	背景顏色
padding	EdgeInsetsGeometry	內間距
deleteIcon	Widget	添加圖標按鈕， 必須與onDeleted 配合使用
onDeleted	VoidCallback	圖標按鈕監聽
deleteIconColor	Color	deleteIcon的顏色
deleteButtonTooltipMessage	String	deleteIcon長按文字提示
materialTapTargetSize	MaterialTapTargetSize	配置點擊目標的最小大小
elevation	double	陰影高度
shadowColor	Color	陰影顏色

????Chip(
??????avatar:?Icon(Icons.add_alert),
??????label:?Text('我是一個標簽'),
??????deleteIcon:?Icon(Icons.close),
??????deleteIconColor:Colors.red,
??????deleteButtonTooltipMessage:'點你妹',
??????labelStyle:?TextStyle(color:?Colors.white),
??????backgroundColor:?Colors.blue,
??????elevation:20,
??????shadowColor:Colors.grey,
??????onDeleted:?(){
????????print('onTap');
??????},
????),

Slider ?與 CupertinoSlider

Slider

屬性名類型簡述

value	double	當前值 ?默認 0 -- 1 之間
onChanged	ValueChanged	滑動過程中調用
onChangeStart	ValueChanged	開始滑動時調用
onChangeEnd	ValueChanged	滑動完成時調用
min	double	最小值 ?默認 0
max	double	最大值 ?默認 1
divisions	int	分段個數
label	String	滑動時 顯示的文字 ?(必須與divisions配合使用)
activeColor	Color	用于滑塊軌道的活動部分的顏色
inactiveColor	Color	滑塊軌道的非活動部分的顏色

CupertinoSlider?控件屬性與Slider?基本相同。

????Slider(
????????label:'current?${valuec.round()}',
????????max:?100,
????????min:?0,
????????divisions:?5,
????????activeColor:Colors.blue,
????????inactiveColor:?Colors.yellow,

????????value:this.valuec,
????????onChanged:?(double?v)?{
??????????setState(()?{
????????????this.valuec?=?v;
??????????});
????????},
????????onChangeStart:?(startValue)?{
??????????print('Started?at?$startValue');
????????},
????????onChangeEnd:?(newValue)?{
??????????print('Ended?on?$newValue');
????????},
????),

Switch 和 CupertinoSwitch

Switch

屬性名類型簡述

value	bool	當前開關狀態
onChanged	ValueChanged	開關狀態變化回調
activeColor	Color	打開狀態的顏色
activeTrackColor	Color	打開狀態時軌道上的顏色。
inactiveThumbColor	Color	關閉狀態按鈕的顏色
inactiveTrackColor	Color	關閉狀態軌道顏色
activeThumbImage	ImageProvider	打開狀態下按鈕圖片
inactiveThumbImage	ImageProvider	關閉狀態下按鈕圖片
materialTapTargetSize	MaterialTapTargetSize	配置點擊目標的最小大小
dragStartBehavior	DragStartBehavior	確定處理拖動啟動行為的方式
focusNode	FocusNode	用于焦點管理和監聽
autofocus	bool	是否自動獲得焦點

CupertinoSwitch 的屬性較少

屬性名類型簡述

value	bool	當前開關狀態
onChanged	ValueChanged	開關狀態變化回調
activeColor	Color	打開狀態的顏色

????Switch(
??????activeColor:Colors.red,
??????activeTrackColor:Colors.yellow,
??????inactiveThumbColor:Colors.pink[200],
??????inactiveTrackColor:Colors.black,
??????value:?this.valuea,
??????onChanged:?(v)?{
????????setState(()?{
??????????this.valuea?=?v;
????????});
??????},
????),

本文視頻課程

總結

以上是生活随笔為你收集整理的scenebuilder各控件属性介绍_Flutter 全栈式——基础控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。