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