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中 其效果如下：

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);
            });
          },
複製程式碼

這樣就可以達到相對應的要求,效果如下

具體的程式碼，可以檢視 demo