Flutter InputChip 用来实现可点击的标签效果

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

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

重要消息

• flutter从入门 到精通 系列文章

---

InputChip 是Material Design的一个 Widget，用来实现标签效果，InputChip 实现的标签可以实现点击事件以及是否选中的效果

1 基本使用效果如下

核心代码如下：

  InputChip buildChip() 
    return InputChip(
      padding: const EdgeInsets.only(left: 2),
      avatar: const CircleAvatar(
        child: Text('AB'),
      ),
      label: const Text('Aaron Burr'),
      //点击事件
      onPressed: () 
        print('onPressed click');
      ,
      pressElevation: 4.0,
      isEnabled: true,
      //不可点击时的颜色
      disabledColor: Colors.grey,
      ///
      selectedColor: Colors.blue,
      selected: false,
      selectedShadowColor: Colors.deepOrange,
      onSelected: (bool select) 
        print('select click $select');
      ,
    );
  

2 属性说明

• padding 用来设置 InputChip 中的上下左右内边距
• avatar用来设置最左侧的显示Widget，一般是个小图标
• label 是用来设置显示的文本
• isEnabled 为true ，InputChip 可以被点击，false，不可点击
• onPressed 是点击按钮时响应的事件
• disabledColor InputChip 不可点击时显示的颜色，isEnabled 为 false时
• selected 为true 时，InputChip为选中
• selectedColor 是 InputChip 为选中状态时显示的颜色
• selectedShadowColor 是 InputChip 选中时显示的阴影颜色

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

---

完毕