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
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/18412.html