Flutter ChoiceChip 用来实现选择标签效果

素颜马尾好姑娘i 2023-10-07 20:51 13阅读 0赞

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

**重要消息**

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

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

ChoiceChip 是Material Design的一个 Widget，用来实现选择标签效果，如下图所示  
![在这里插入图片描述][df3181fb11c94026a7266c05d3a63496.gif_pic_center]

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

class _ChoiceClipHomeState extends State<ChoiceClipHome> {
        
      ///当前选中的索引
      int? _value = 1;
    
      final List<Map<String, dynamic>> _tagList = [
        {
        "tag": "早起", "index": 0},
        {
        "tag": "早睡", "index": 1},
        {
        "tag": "精神", "index": 2},
      ];
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(title: const Text("ChoiceClip")),
          body: Center(
            ///核心代码
            child: buildChoiceClip(),
          ),
        );
      }
      
    
      Widget buildChoiceClip() {
        
        return Wrap(
          children: _tagList
              .map((e) => Padding(
                    padding: EdgeInsets.only(left: 5, right: 5),
                    child: buildItem(e),
                  ))
              .toList(),
        );
      }
     ///构建每一个 ChoiceChip
      ChoiceChip buildItem(Map<String, dynamic> map) {
        
        String tag = map["tag"];
        int index = map["index"];
        return ChoiceChip(
          label: Text(tag),
          selected: _value == index,
          onSelected: (bool selected) {
        
            setState(() {
        
              _value = selected ? index : null;
            });
          },
          labelStyle: TextStyle(
            color: _value == index ? Colors.white : Colors.black,
          ),
          selectedColor: Colors.red,
          surfaceTintColor: Colors.white,
        );
      }
    }

##### 2 ChoiceChip 属性概览 #####

*  autofocus → bool  
    如果此小部件将被选择为初始焦点，而其作用域中目前没有其他节点被聚焦，则为True。  
    最后
 *  avatar → Widget  
    文本最左侧显示的Widget，一般是个小图标
 *  avatarBorder→ShapeBorder  
    当 ChoiceChip的 selected 属性为 true.，在avatar上绘制的半透明高光的形状。
 *  backgroundColor  
    颜色将用于 ChoiceChip 未选中 并且 isEnabled 的值为 true 时显示的背景色
 *  disabledColor→颜色?  
    颜色将用于 ChoiceChip 未选中 并且 isEnabled 的值为 false 时显示的背景色
 *  elevation → double?  
    阴影高度
 *  iconTheme→IconThemeData吗?  
    用于 ChoiceChip 中所有图标的主题。
 *  isEnabled→bool  
    该芯片是否可用于输入。
 *  labelPadding→EdgeInsetsGeometry吗?  
    标签小部件周围的填充。
 *  labelStyle→TextStyle吗?  
    应用于ChoiceChip标签的文本样式。
 *  onselect→ValueChanged < bool > ?  
    当ChoiceChip 在选定和取消选定状态之间更改时调用。
 *  pressElevation→双吗?  
    在按压运动期间，将应用于ChoiceChip 阴影调试。
 *  selected →bool  
    该ChoiceChip是否被选中。
 *  selectedColor→颜色?  
    用于ChoiceChip背景的颜色，表示它已被选中。
 *  selectedShadowColor→颜色?  
    选中时阴影的颜色
 *  shadowColor→颜色?  
    默认显示的阴影的颜色。  
    最后  
    shape→OutlinedBorder吗?  
    在 ChoiceChip 周围绘制的轮廓边界。  
    side →BorderSide吗?  
    ChoiceChip 轮廓的颜色和重量。

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

完毕

[flutter_ _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[df3181fb11c94026a7266c05d3a63496.gif_pic_center]: https://img-blog.csdnimg.cn/df3181fb11c94026a7266c05d3a63496.gif#pic_center