图标组件(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 | "" | 当按钮按下时的组件提示语句 |