Flutter 基于ChoiceChip的标签选择控件 开发演练

2019年6月20日20:00:17 发表评论 340 views

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

Flutter 基于ChoiceChip的标签选择控件 开发演练

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

作者:Rx_Re
链接:https://juejin.im/post/5d098cb751882542fc3336fb
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: