欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第五十三个:Icon

程序员文章站 2022-06-01 18:34:41
...
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

Icon

Icon是图标控件,Icon不具有交互属性,如果想要交互,可以使用IconButton,另外Icon是具有方向性(Directionality)的,但通常情况下不会在Icon中设置textDirection,而是使用*控件中的设置。

使用图标需要在pubspec.yaml中进行设置:

flutter:
  uses-material-design: true

创建Flutter项目的时候默认配置了此项,所以正常情况下不需要关注。

基本用法:

Icon(Icons.add)

系统提供的图标都在Icons中,效果如下:

《Flutter 控件大全》第五十三个:Icon

到官网查看所有图标:https://api.flutter.dev/flutter/material/Icons-class.html

所有图标一览:

《Flutter 控件大全》第五十三个:Icon

推荐一些图标库:

建议大家多使用图标,不仅包体会小很多,而且图标都是矢量的,不存在失真的问题。

设置其大小和颜色:

Icon(
  Icons.add,
  size: 28,
  color: Colors.red,
)

效果如下:

《Flutter 控件大全》第五十三个:Icon

AssetImage

AssetImage控件是根据图片绘制图标,就是图片上的透明通道不绘制,而不透明的地方使用设置的颜色绘制,

比如下面这张原图

《Flutter 控件大全》第五十三个:Icon

除了字体外,其他地方是透明的,将字体显示为蓝色:

ImageIcon(
  AssetImage('images/name1.png'),
  size: 100,
  color: Colors.blue,
)

效果如下:

《Flutter 控件大全》第五十三个:Icon

这里说下image参数,它接收的类型是ImageProvider,平时使用的Image.assetImage.memory等不是此类型,需要使用AssetImage、MemoryImage等。

相关标签: # Flutter Widgets