1.ChoiceChip

ChoiceChip 選擇控件蛀柴，可以實(shí)現(xiàn)單選效果

先看對(duì)應(yīng)的屬性

 const ChoiceChip({
    Key key,
    this.avatar, //左側(cè)Widget 一般小圖標(biāo)
    @required this.label, //標(biāo)簽文字
    this.labelStyle, //標(biāo)簽文字的樣式
    this.labelPadding, 
    this.onSelected, 
    this.pressElevation, 
    @required this.selected, //是否選中
    this.selectedColor, //選擇的顏色
    this.disabledColor, //不可用的顏色
    this.tooltip, 
    this.shape, //shape 默認(rèn)是兩端半圓形
    this.clipBehavior = Clip.none,
    this.backgroundColor, //背景色
    this.padding, 
     //設(shè)置為MaterialTapTargetSize.shrinkWrap時(shí)
     //睹酌，clip距頂部距離為0伞租；設(shè)置為MaterialTapTarget
     //Size.padded時(shí)距頂部有一個(gè)距離
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,//陰影背景色
    this.selectedShadowColor,//選中的陰影背景色
    this.avatarBorder = const CircleBorder(),
  })

默認(rèn)的情況下熏兄，ChoiceChip 選擇主要是修改背景色以及對(duì)應(yīng)的文字亡容，

2.封裝代碼

MultiNormalSelectChip封裝ChoiceChip完成標(biāo)簽選擇

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


class MultiNormalSelectChip<T extends BaseSelectEntity> extends StatefulWidget {
  /// 標(biāo)簽的list
  final List<T> dataList;

  /// 標(biāo)簽的list
  final List<T> selectList;

  ///選擇回調(diào)事件
  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(),
    );
  }
}

定義個(gè)基本實(shí)體類嗤疯，BaseSelectEntity,提供getTag方法返回標(biāo)簽的label,之后根據(jù)傳進(jìn)來(lái)的list,遍歷生成對(duì)應(yīng)的choiceChip即可完成標(biāo)簽選擇。然后通過(guò)回調(diào)函數(shù)onSelected 設(shè)置對(duì)應(yīng)的選中的item 存入selectList中
其效果如下：

image

3.修改原有的ChoiceChip

然而公司UI給的圖確實(shí)這樣的闺兢，這種情況下茂缚，就需要修改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);
            });
          },

這樣就可以達(dá)到相對(duì)應(yīng)的要求,效果如下

image

具體的代碼，可以查看 demo