Flutter 基于ChoiceChip的标签选择控件

1.ChoiceChip

ChoiceChip 选择控件，可以实现单选效果

先看对应的属性

 const ChoiceChip({
    Key key,
    this.avatar, //左侧Widget 一般小图标
    @required this.label, //标签文字
    this.labelStyle, //标签文字的样式
    this.labelPadding, 
    this.onSelected, 
    this.pressElevation, 
    @required this.selected, //是否选中
    this.selectedColor, //选择的颜色
    this.disabledColor, //不可用的颜色
    this.tooltip, 
    this.shape, //shape 默认是两端半圆形
    this.clipBehavior = Clip.none,
    this.backgroundColor, //背景色
    this.padding, 
     //设置为MaterialTapTargetSize.shrinkWrap时
     //，clip距顶部距离为0；设置为MaterialTapTarget
     //Size.padded时距顶部有一个距离
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,//阴影背景色
    this.selectedShadowColor,//选中的阴影背景色
    this.avatarBorder = const CircleBorder(),
  })

默认的情况下，ChoiceChip 选择主要是修改背景色以及对应的文字，

2.封装代码

MultiNormalSelectChip封装ChoiceChip完成标签选择

//提供tag基本类
abstract class BaseSelectEntity{
  String getTag();
}


class MultiNormalSelectChip<T extends BaseSelectEntity> extends StatefulWidget {
  /// 标签的list
  final List<T> dataList;

  /// 标签的list
  final List<T> selectList;

  ///选择回调事件
  final Function(List<T>) onSelectionChanged;

  MultiNormalSelectChip(this.dataList, {this.selectList, this.onSelectionChanged});

  @override
  _MultiNormalSelectChipState createState() => _MultiNormalSelectChipState(selectList);
}

class _MultiNormalSelectChipState<T extends BaseSelectEntity>
    extends State<MultiNormalSelectChip> {
  List<T> selectList;

  _MultiNormalSelectChipState(this.selectList);

  _buildChoiceList() {
    List<Widget> choices = List();
    widget.dataList.forEach((item) {
      choices.add(Container(
        height: 31,
        padding: EdgeInsets.all(4),
        child: ChoiceChip(
          label: Text(
            item.getTag(),
            style: TextStyle(fontSize: 14),
          ),
          selected: selectList.contains(item),
          materialTapTargetSize: MaterialTapTargetSize.padded,
          labelPadding: EdgeInsets.only(bottom: 9),
          padding: EdgeInsets.only(left: 12, right: 12, bottom: 9),
          selectedColor: Colors.white,
          backgroundColor: Colors.blue,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
            side: BorderSide(color: Colors.black, width: 0.5),
          ),
          onSelected: (selected) {
            setState(() {
              selectList.contains(item)
                  ? selectList.remove(item)
                  : selectList.add(item);
              widget.onSelectionChanged(selectList);
            });
          },
        ),
      ));
    });

    return choices;
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      alignment: WrapAlignment.end,
      children: _buildChoiceList(),
    );
  }
}

定义个基本实体类，BaseSelectEntity,提供getTag方法返回标签的label,之后根据传进来的list,遍历生成对应的choiceChip即可完成标签选择。然后通过回调函数onSelected 设置对应的选中的item 存入selectList中
其效果如下：

image

3.修改原有的ChoiceChip

然而公司UI给的图确实这样的，这种情况下，就需要修改ChoiceChip源码，增加selectShape属性

BorderChoiceChip(
          label: Text(
            item.getTag(),
            style: TextStyle(fontSize: 14),
          ),
          selected: selectList.contains(item),
          materialTapTargetSize: MaterialTapTargetSize.padded,
          labelPadding: EdgeInsets.only(bottom: 9),
          padding: EdgeInsets.only(left: 12, right: 12, bottom: 9),
          selectedColor: Colors.white,
          backgroundColor: Colors.white,
          //修改边框样式
          selectShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
            side: BorderSide(color: Colors.blue, width: 0.5),
          ),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
            side: BorderSide(color: Colors.black, width: 0.5),
          ),
          onSelected: (selected) {
            setState(() {
              selectList.contains(item)
                  ? selectList.remove(item)
                  : selectList.add(item);
              widget.onSelectionChanged(selectList);
            });
          },

这样就可以达到相对应的要求,效果如下

image

具体的代码，可以查看 demo