在Flutter中，UI小控件有兩種設(shè)計(jì)風(fēng)格，一種是Material設(shè)計(jì)，這是安卓的官方設(shè)計(jì)風(fēng)格，另一種則是Cupertino風(fēng)格，是iOS的官方設(shè)計(jì)風(fēng)格。因此，當(dāng)遇到帶有這兩個(gè)單詞開頭的控件時(shí)，我們應(yīng)該明確他們表達(dá)的意思。

• 官方Widgets 介紹文檔

• 官方Widgets API文檔

• 中文 Widgets 介紹文檔

控件簡(jiǎn)述

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

Text

屬性名類型簡(jiǎn)述

data	String	需要顯示的文本字符串
style	TextStyle	文本顯示的樣式
textAlign	TextAlign	文本對(duì)齊方式
textDirection	TextDirection	文本顯示方向
softWrap	bool	是否自動(dòng)換行
overflow	TextOverflow	溢出處理。clip：剪輯溢出的文本；fade：將溢出的文本淡化為透明；ellipsis：用省略號(hào)表示溢出；visible：在容器之外顯示溢出的文本
textScaleFactor	double	每個(gè)邏輯像素的字體像素值。簡(jiǎn)單說(shuō)就是字體縮放系數(shù)
maxLines	int	文本最多可顯示的行數(shù)。如果文本超過(guò)給定的行數(shù)，則根據(jù)溢出規(guī)則截?cái)?/td>
textSpan	TextSpan	以TextSpan方式顯示文本。需使用Text.rich構(gòu)造方法創(chuàng)建

Image

構(gòu)造方法

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

屬性名類型簡(jiǎn)述

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

//?直接構(gòu)造

BoxFit 填充模式

文檔地址

取值簡(jiǎn)述

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

TextField

屬性名類型簡(jiǎn)述

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

裝飾器 InputDecoration

屬性名類型簡(jiǎn)述

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

border的三種值

• InputBorder.none 沒(méi)有邊框
• OutlineInputBorder 線框
• UnderlineInputBorder 底邊線，默認(rèn)的

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

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

小技巧

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

輸入校驗(yàn) ?TextInputFormatter

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

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

前兩個(gè)在實(shí)際使用時(shí)，其實(shí)是使用的Dart中正則表達(dá)式

///?黑名單校驗(yàn)?+?長(zhǎng)度限制

Button

Button的通用屬性

屬性名類型簡(jiǎn)述

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

????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

屬性名類型簡(jiǎn)述

value	動(dòng)態(tài)類型	此單選按鈕表示的值
groupValue	動(dòng)態(tài)類型	該組單選按鈕當(dāng)前選定的值
onChanged	ValueChanged	狀態(tài)變化回調(diào)
activeColor	Color	選中時(shí)的顏色
materialTapTargetSize	MaterialTapTargetSize	配置點(diǎn)擊目標(biāo)的最小大小。
focusNode	FocusNode	用于焦點(diǎn)管理和監(jiān)聽
autofocus	bool	是否自動(dòng)獲得焦點(diǎn)

????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

屬性名類型簡(jiǎn)述

value	bool	是否選中此復(fù)選框
onChanged	ValueChanged	該組單選按鈕當(dāng)前選定的值
tristate	bool	默認(rèn)false，如果為true，復(fù)選框的值可以為true、false或null
activeColor	Color	選中時(shí)的顏色
checkColor	Color	選中時(shí)復(fù)選框圖標(biāo)的顏色
materialTapTargetSize	MaterialTapTargetSize	配置點(diǎn)擊目標(biāo)的最小大小
focusNode	FocusNode	用于焦點(diǎn)管理和監(jiān)聽
autofocus	bool	是否自動(dòng)獲得焦點(diǎn)

????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

屬性名類型簡(jiǎn)述

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

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

Slider ?與 CupertinoSlider

Slider

屬性名類型簡(jiǎn)述

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

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

屬性名類型簡(jiǎn)述

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

CupertinoSwitch 的屬性較少

屬性名類型簡(jiǎn)述

value	bool	當(dāng)前開關(guān)狀態(tài)
onChanged	ValueChanged	開關(guān)狀態(tài)變化回調(diào)
activeColor	Color	打開狀態(tài)的顏色

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

本文視頻課程

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。