第六十二回：Chip Widget

我们在上一章回中介绍了Slider Widget相关的内容，本章回中将介绍如何使用Chip Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

本文中提到的Chip Widget在屏幕上显示一小块区域，类似悬浮的按钮，通常在网页类操作中比较常见，比如最近的搜索记录，或者视频中的弹幕。在实际项目中使用场景不是很多，不过本章回中还是准备去介绍它的使用方法。

使用方法

和其它的组件一样，Chip Widget提供了相关的属性来控自己，下面是一些常用的属性：

• label属性：主要用来显示文本内容，类似于Button上的文本；
• labelStyle属性：主要用来修改label中文字的style;
• backgroundColor属性：主要用来修改整个chip组件的背景颜色;
• avatar属性：主要用来在label显示的文字前面添加一个圆形文字或者图标；
• deleteIcon属性：主要用来在label显示的文字后面添加图标；
• deleteIconColor属性：主要用来修改deleteIcon属性中图标的颜色；
• onDeleted属性：主要用来响应deleteIcon属性中图标的点击事件；

上面介绍的这些属性中只有第一个属性是必选属性，其它属性都是可选属性，我们可以依据项目需求自行选择其中的属性;此外，还有一个需要注意的是只有onDelete属性有值的时候deleteIcon属性中对应的图标才能被显示出来，否则该图标不会被显示。

示例代码

Chip(
  label: Text('label'),
  backgroundColor: Colors.purpleAccent,
  avatar: CircleAvatar(
  backgroundColor: Colors.pinkAccent,
  child: Text("Avatar"),
  backgroundImage: AssetImage("images/ex.png"),
  ),
  //该属性只有设置onDeleted属性时才起作用，否则看不到图标,图标在尾部和头部相对应
  deleteIcon: Icon(Icons.delete),
  deleteIconColor: Colors.redAccent,
  onDeleted:()=>print('onDeleted callback'),
  //修改label中文字的style
  labelStyle: TextStyle(
    color: Colors.pink,
    fontSize: 21,
    backgroundColor: Colors.grey,
  ),
),

上面的代码中综合使用了各种属性，我们在相关地方都添加了注释,以方便大家理解代码。 上面的代码只是一个核心代码，完整的代码在Github上的ex028文件中，建议大家参考完整代码中的内容，自己动手编译程序，体会一下Chip这个组件的使用方法。

其它种Chip

Chip组件还有其它类似的组件，这些组件主要是用来响应事件的，常用的组件有InputChip和ActionChip，这两种组件与Chip组件最大的区别是多了一个onPress属性，该属性主要用来响应事件，类似按钮中的事件。我在这里就提供示例代码了，建议大家参考完整文件中的示例代码,同时自己动手去实践。

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