《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中,效果如下:
到官网查看所有图标:https://api.flutter.dev/flutter/material/Icons-class.html
所有图标一览:
推荐一些图标库:
建议大家多使用图标,不仅包体会小很多,而且图标都是矢量的,不存在失真的问题。
设置其大小和颜色:
Icon(
Icons.add,
size: 28,
color: Colors.red,
)
效果如下:
AssetImage
AssetImage控件是根据图片绘制图标,就是图片上的透明通道不绘制,而不透明的地方使用设置的颜色绘制,
比如下面这张原图
除了字体外,其他地方是透明的,将字体显示为蓝色:
ImageIcon(
AssetImage('images/name1.png'),
size: 100,
color: Colors.blue,
)
效果如下:
这里说下image
参数,它接收的类型是ImageProvider
,平时使用的Image.asset
、Image.memory
等不是此类型,需要使用AssetImage、MemoryImage等。
推荐阅读
-
《Flutter 控件大全》第四十六个:Flexible、Expanded、Spacer
-
《Flutter 控件大全》第六十六个:PageView
-
《Flutter 控件大全》第十五个:AnimatedPositionedDirectional
-
《Flutter 控件大全》第三十三个:DecoratedBoxTransition
-
《Flutter 控件大全》第二十六个:ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio
-
《Flutter 控件大全》第六个:AnimatedBuilder
-
《Flutter 控件大全》第五十三个:Icon
-
《Flutter 控件大全》第五十一个:GridView
-
《Flutter 控件大全》第三十九个:DraggableScrollableSheet
-
《Flutter 控件大全》第五十个:GridPaper