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

比眉伴天荒 2023-10-07 20:51 11阅读 0赞

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

**重要消息**

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

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

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

##### 1 基本使用效果如下 #####

![在这里插入图片描述][bdafc41d0f2349b8848b76ff3b63bdc9.gif_pic_center]  
核心代码如下：

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 用来实现文本标签的效果][Flutter Clip]

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

完毕

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