Flutter学习日记之Chip标签组件的使用

Posted 2021-06-30 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/118035416，转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

黑发不知勤学早，白首方悔读书迟

本次介绍的是Chip组件，是一个可以点击&删除&选择的标签，源码地址：https://gitee.com/fjjxxy/flutter-study.git，效果如下:

（一）(Chip)普通的Chip标签

                Chip(
                    label: Text("带头像的标签"),
                    avatar: CircleAvatar(
                      child: Text("刘"),
                      backgroundImage: NetworkImage(
                          "https://profile.csdnimg.cn/D/6/7/2_qq_40785165"),
                    ))

常见参数如下:

参数	说明
avatar	标签左侧的头像
label	标签文字内容
labelStyle	标签文字内容的样式
labelPadding	标签文字内容与外部的间距
deleteIcon	标签右侧的图标，一般是删除
onDeleted	点击右侧图标的事件监听
deleteIconColor	标签右侧的图标颜色
useDeleteButtonTooltip	长按右侧图标是否需要提示
deleteButtonTooltipMessage	长按右侧图标的提示内容
side	边框的颜色
shape	边框的圆角
backgroundColor	背景颜色
padding	标签内部间距
elevation	标签的阴影大小
shadowColor	标签阴影的颜色

以下代码请对照开头效果图，有问题可以在评论区提出，代码如下：

1. 普通的标签

Chip(label: Text("普通的标签")),

2. .带头像的标签

                Chip(
                    label: Text("带头像的标签"),
                    avatar: CircleAvatar(
                      child: Text("刘"),
                      backgroundImage: NetworkImage(
                          "https://profile.csdnimg.cn/D/6/7/2_qq_40785165"),
                    ))

3. 带删除的标签

                Chip(
                  avatar: CircleAvatar(
                    child: Text(
                      "李",
                      style: TextStyle(color: ColorUtils.color_black),
                    ),
                    backgroundColor: ColorUtils.color_white,
                  ),
                  label: Text("带删除的标签"),
                  deleteButtonTooltipMessage: "提示:删除",
                  deleteIcon: Icon(Icons.close),
                  onDeleted: () {
                    Toast.toast(context, msg: "删除");
                  },
                  deleteIconColor: ColorUtils.color_red_f1091c,
                  useDeleteButtonTooltip: false,
                )

4. 修改边框后的标签

                Chip(
                  label: Text("修改边框后的标签"),
                  labelPadding: EdgeInsets.all(10),
                  deleteButtonTooltipMessage: "提示:删除",
                  deleteIcon: Icon(Icons.close),
                  onDeleted: () {
                    Toast.toast(context, msg: "删除");
                  },
                  deleteIconColor: ColorUtils.color_red_f1091c,
                  useDeleteButtonTooltip: false,
                  //长按是否显示删除提示
                  side: BorderSide(color: ColorUtils.color_orange_main),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                )

5. 带阴影的标签

                Chip(
                  label: Text("带阴影的标签"),
                  labelPadding: EdgeInsets.all(10),
                  deleteButtonTooltipMessage: "提示:删除",
                  deleteIcon: Icon(Icons.close),
                  onDeleted: () {
                    Toast.toast(context, msg: "删除");
                  },
                  deleteIconColor: ColorUtils.color_red_f1091c,
                  useDeleteButtonTooltip: false,
                  //长按是否显示删除提示
                  elevation: 5,
                  shadowColor: ColorUtils.color_red_f1091c,
                )

（二）(ActionChip)可点击的标签

ActionChip在Chip的基础上新增了onPressed参数，代表标签的点击事件，代码如下：

                ActionChip(
                    pressElevation: 10,
                    tooltip: "点击",
                    //长按提示
                    labelPadding: EdgeInsets.all(10),
                    avatar: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://profile.csdnimg.cn/D/6/7/0_qq_40785165"),
                    ),
                    label: Container(
                        width: 120,
                        child: Row(children: [
                          Text("可点击的标签"),
                          SizedBox(
                            width: 10,
                          ),
                          Icon(Icons.close)
                        ])),
                    onPressed: () {
                      Toast.toast(context, msg: "点击");
                    })

（三）(ChoiceChip)可选中的标签

ChoiceChip在Chip的基础上多了以下参数

参数	说明
selected	是否被选中
onSelected	选择的回调，可以在这里更新自己的选中状态
selectedColor	选中时的背景颜色
disabledColor	禁用时的颜色
selectedShadowColor	选中时的阴影颜色
pressElevation

Demo中在选中监听中修改当前选中的索引，通过比较索引来更新选中状态，代码如下：

  List<Widget> getChoiceWrapChildren() {
    List<Widget> list = [];
    for (var i = 0; i < _list.length; i++) {
      list.add(ChoiceChip(
        avatar: CircleAvatar(
          backgroundImage: NetworkImage(
              "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3686156064,2328177349&fm=26&gp=0.jpg"),
        ),
        label: Text("${_list[i]}"),
        labelStyle: TextStyle(color: ColorUtils.color_white),
        selected: _selectIndex == i,
        onSelected: (select) {
          setState(() {
            _selectIndex = select ? i : null;
          });
        },
        selectedColor: ColorUtils.color_orange_main,
        disabledColor: ColorUtils.color_white,
        selectedShadowColor: ColorUtils.color_red_f1091c,
      ));
    }
    return list;
  }

（四）(FilterChip)带有勾选标志的标签

FilterChip在ChoiceChip的基础上新增了以下参数:

参数	说明
showCheckmark	是否显示选中的标志,默认是打勾的图标,无法修改
checkmarkColor	选中标志的颜色
showCheckmark	是否显示选中的标志

Demo中通过判断当前索引是否在数组中来实现复选的效果，代码如下:

  List<Widget> getFilterWrapChildren() {
    List<Widget> list = [];
    for (var i = 0; i < _list.length; i++) {
      list.add(FilterChip(
        showCheckmark: true,
        //是否显示勾选的标志
        checkmarkColor: ColorUtils.color_white,
        pressElevation: 0,
        clipBehavior: Clip.antiAlias,
        avatar: CircleAvatar(
          backgroundImage: NetworkImage(
              "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3686156064,2328177349&fm=26&gp=0.jpg"),
        ),
        label: Text("${_list[i]}"),
        labelStyle: TextStyle(color: ColorUtils.color_white),
        selected: _indexList.contains(i),
        onSelected: (select) {
          setState(() {
            if (select) {
              _indexList.add(i);
            } else {
              _indexList.remove(i);
            }
          });
        },
        selectedColor: ColorUtils.color_orange_main,
        disabledColor: ColorUtils.color_white,
        selectedShadowColor: ColorUtils.color_red_f1091c,
      ));
    }
    return list;
  }

（五）(InputChip)同时具备点击&删除&选择&勾选标志的标签

InputChip同时具备以下事件监听：

参数	说明
onSelected	选择的监听
onDeleted	点击删除的监听
onPressed	点击标签的监听

同时也具备FilterChip的勾选标志相关参数

注意：InputChip的onPressed和onSelected不能同时出现，否则会报错

代码如下：

  List<Widget> getInputWrapChildren() {
    List<Widget> list = [];
    for (var i = 0; i < _list.length; i++) {
      list.add(InputChip(
        deleteIcon: Icon(Icons.close),
        onDeleted: () {
          showDialog(
              context: context,
              builder: (context) {
                return CommonDialog(
                    content: "确定删除吗?",
                    onConfirm: () {
                      setState(() {
                        _list.removeAt(i);
                      });
                      Toast.toast(context, msg: "已删除");
                      Navigator.pop(context);
                    },
                    onCancel: () {
                      Navigator.pop(context);
                    });
              });
        },
        deleteIconColor: ColorUtils.color_red_f1091c,
        useDeleteButtonTooltip: true,
        showCheckmark: true,
        //是否显示勾选的标志
        checkmarkColor: ColorUtils.color_white,
        pressElevation: 0,
        clipBehavior: Clip.antiAlias,
        avatar: CircleAvatar(
          backgroundImage: NetworkImage(
              "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3686156064,2328177349&fm=26&gp=0.jpg"),
        ),
        label: Text("${_list[i]}"),
        labelStyle: TextStyle(color: ColorUtils.color_white),
        /* onPressed: () {
          Toast.toast(context, msg: "以点击$i");
        },*/
        selected: _indexList.contains(i),
        onSelected: (select) {
          setState(() {
            if (select) {
              _indexList.add(i);
            } else {
              _indexList.remove(i);
            }
          });
        },
        selectedColor: ColorUtils.color_orange_main,
        disabledColor: ColorUtils.color_white,
        selectedShadowColor: ColorUtils.color_red_f1091c,
      ));
    }
    return list;
  }

点击删除时会弹出一个对话框，还不了解对话框以及自定义对话框的可以阅读我的往期博客，相信对大家也会有帮助：

1. Flutter学习日记之自定义封装Dialog
2. Flutter学习日记之Dialog的使用

到此为止，Flutter中Chip标签组件的使用就介绍完毕了，多写才能熟能生巧，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个Star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!