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

Posted 2022-11-29 早起的年轻人

程序员如果敲一会就停半天，抱着一杯茶，表情拧巴，那才是在编程，在之前我要实现一级标签效果，我还在苦苦写了好多嵌套的代码，当我看到 Clip 时，泪奔啊，原来一个组件就可以实现，所以从事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?');
      ,
    );
  

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

---

完毕