图标(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

""

当按钮按下时的组件提示语句

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值