Flutter ActionChip 用来实现点击效果的小标签

矫情吗；* 2023-10-07 20:53 40阅读 0赞

> 程序员如果敲一会就停半天，抱着一杯茶，表情拧巴，那才是在编程，在之前我要实现一级标签效果，我还在苦苦写了好多嵌套的代码，当我看到 Clip 时，泪奔啊，原来一个组件就可以实现，所以从事Flutter开发的小伙伴可以瞅瞅效果，万一用上呢 。

**重要消息**

*  [flutter从入门 到精通 系列文章][flutter_ _]

--------------------

ActionChip 是Material Design的一个 Widget，用来实现可点击的小标签效果。  
ActionChip 是触发与主要内容相关的操作的一组选项，常应用在UI中动态和上下文显示。  
可以点击以触发动作或显示进度和确认。不能禁用它们，如果不使用点击事件，则不选择使用ActionChip。

ActionChip 常显示在主要内容之后，例如卡片下方或屏幕底部。

##### 核心使用代码如下 #####

ActionChip buildActionChip() {
        
        return ActionChip(
          avatar: CircleAvatar(
            backgroundColor: Colors.grey.shade800,
            child: const Text('AB'),
          ),
          label: const Text('Aaron Burr'),
          onPressed: () {
        
            print('If you stand for nothing, Burr, what’ll you fall for?');
          },
        );
      }

![在这里插入图片描述][5c5aa7836f2a47eba02682d8ca10774a.gif_pic_center]

其他属性与 Clip 的属性效果是一致的，大家可点击查看[Flutter Clip 用来实现文本标签的效果][Flutter Clip]

--------------------

完毕

[flutter_ _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[5c5aa7836f2a47eba02682d8ca10774a.gif_pic_center]: https://img-blog.csdnimg.cn/5c5aa7836f2a47eba02682d8ca10774a.gif#pic_center
[Flutter Clip]: https://biglead.blog.csdn.net/article/details/127581885