圖標(Icon)和圖標按鈕(IconButton)

圖標組件(Icon)爲展示圖標的組件,該組件不可交互,要實現交互的圖標,可以考慮使用IconButton組件。圖標組件相關的組件有一下幾個:

IconButton:可交互的Icon。

Icons:框架自帶Icon集合。

IconTheme:Icon主題。

ImageIcon:通過AssetImages或者其他圖片顯示Icon。

 

圖標組件常用屬性如下:

屬性名

類型

默認值

說明

color

Color

null

圖標的顏色,例如Colors.green[500]

icon

IconData

null

展示的具體圖標,可以使用Icons圖標列表中的任意一個圖標即可,如Icons.phone表示一個電話的圖標

style

TextStyle

null

文本樣式,可定義文本的字體大小、顏色、粗細等

size

Double

24

圖標的大小,注意需要帶上小數位

textDirection

TextDirection

TextDirection

Icon組件裏也可以添加文本內容。有些文本書寫的方向是從左到右,有些則是從右到左。從左到右使用TextDirection.ltr,從右到左使用TextDirection.rtl

 

 

圖標按鈕組件(IconButton)是基於Material Design風格的組件,它可以響應按下事件,並且按下時會帶一個水波紋的效果。如果它的onPressed回調函數爲null,那麼這個按鈕處於禁用狀態,並且不可以按下。常用屬性如下:

屬性名

類型

默認值

說明

alignment

AlignmentGeometry

Alignment.center

定義IconButton的Icon對齊方式,默認爲居中。Alignment是可以設置x,y的偏移量的

icon

Widget

null

展示的具體圖標,可以使用Icons圖標列表中的任意一個圖標即可,如Icons.phone表示一個電話的圖標

color

Color

null

圖標組件的顏色

disabledColor

Color

ThemeData.disabledColor

圖標組件禁用的顏色,默認爲主題裏的禁用顏色,也可以設置爲其他顏色值

iconSize

double

24.0 

圖標的大小,注意需要帶上小數位

onPressed

VoidCallback

null

當按鈕按下時會觸發此回調事件

tooltip

String

""

當按鈕按下時的組件提示語句

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章