第八十四回：Icon Widget

talk_8

已于 2023-07-15 22:24:12 修改

阅读量382

点赞数

CC 4.0 BY-SA版权

分类专栏：一起Talk Flutter吧文章标签： flutter icon icondata Material Icons 图标

于 2023-07-15 22:22:29 首次发布

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/131744896

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章介绍了Flutter中的IconWidget，它用于展示图标，常用于指示功能或动作。Flutter提供系统图标MaterialIcons，也可自定义。IconWidget的关键属性包括icon（必需，IconData类型）、size（控制图标大小）和color（控制颜色）。示例代码展示了如何使用这些属性创建图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在上一章回中介绍了Widget生命周期相关的内容，本章回中将介绍 Icon Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

本章回中介绍的Icon表示一种图标，它类似图片，不过比图片的尺寸小，经常用来指示一些功能或者动作，在程序中它的使用场景比图片多。Flutter提供了系统图标供我们使用，这些图标来自Google Material Icons,如果不喜欢这些图标，可以自己制作图标。

使用方法

和其它Widget一样Icon也提供了相关的属性来控制自己，下面是常用的属性：

icon属性：主要用来存放icon数据，它的类型是IconData；
size属性：主要用来控制图标的大小,它会对图标的长度和宽度等比例缩放；
color属性：主要用来控制图标的颜色；

上面列出的这三个属性中，只有第一个属性是必须的，其它的属性都是可选属性。第一个属性不是命名属性，因此直接给属性赋值就可以。通常情况下给第一个属性赋值时需要创建IconData类型的对象，不过SDK中已经给我们创建好了，我们直接使用就可以，比如Icons.add就是一个IconData类型的对象，它表示一个加号。这些图标来自Google Material Icons。如果大家感觉很抽象的话，看一下示例程序中的代码就会明白。

示例代码

  Icon(Icons.add),

  Icon(Icons.watch,
  size: 90,
  color: Colors.blue[400],
  ),

上面的示例代码中包含两个图标，一个图标只使用了icon属性，另外一个图标使用了我们在上一小节中介绍的三种属性。这两个图标都使用了系统提供的Material Icons.

我们在这里只列出了核心代码，完整的代码可以查看ex034文件中代码，编译并且运行上面的程序可以看到两个图标，一个显示加号，另外一个显示手表，不过图标比较大，因为我们调整了图标的size属性。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，关于Icon Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!