如截图所示 多选功能
实现代码：
实现 多选中的 每个代码：
import 'dart:core'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter/material.dart'; /// @author XCC /// @创建时间:2022/5/9 /// 工具菜单checkbox版子项 class ToolMenuCheckboxItemWidget extends StatelessWidget { /// 显示的title final String title; final int value; /// 点击回调 final Function click; final double? width; final double? width; final double? height; final bool isActive; final Color? backgroundColor; // 未选择背景色 final Color? activeBackgroundColor; // 所选颜色 主题色取主题色 final BoxBorder? activeBorder; // 选中的border final BorderRadiusGeometry? borderRadius; // 圆角 final TextStyle? textStyle; // 文字样式 final TextStyle? activeTextStyle; // 选定的文字样式 const ToolMenuCheckboxItemWidget( {Key? key, this.isActive = false, required this.title, required this.click, required this.value, this.width, this.height, this.activeBackgroundColor, this.backgroundColor, this.activeBorder, this.borderRadius, this.textStyle, this.activeTextStyle}) : super(key: key); @override Widget build(BuildContext context) { TextStyle defaultTextStyle = const TextStyle(); double defaultWidth = width ??? 100.w; double defaultHeight = height ?? 50.w; return Container( // 点击右波纹效果 width: defaultWidth, height: defaultHeight, clipBehavior: Clip.hardEdge, decoration: BoxDecoration( border: !isActive ?isActive ? Border.all(width: 1.w, color: Colors.transparent) : activeBorder, borderRadius: borderRadius ?? BorderRadius.circular(defaultHeight / 2), ), child: Material( color: isActive ? activeBackgroundColor ?? Theme.of(context).primaryColor : backgroundColor ?? Colors.white60, borderRadius: borderRadius ?? BorderRadius.circular(defaultHeight / 2), child: Ink( child: InkWell( onTap: () { click(value); }, child: Center( child: Text(title, style: isActive ? activeTextStyle ? activeTextStyle ?? defaultTextStyle : textStyle ?? defaultTextStyle), ), ), ), ), ); } } 实现多选组件的代码：
import 'dart:core'; import 'package:communityApp/home_system/components/check_box_widget/tool_menu_check_box_item_widget.dart'; import 'package:communityApp/home_system/models/recommendToday.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter/material.dart'; /// @author XCC /// @创建时间:2022/5/9 /// 工具菜单checkbox版 class ToolMenuCheckBoxWidget extends StatefulWidget { final List<FindSimilarYouWant> children; final Function click; // 点击回调 回到N个选择的情况 final double? width; //item 宽 final double? width; //item 宽 final double? height; // item 高 final List? selectList; // 选中的数据 final Color? backgroundColor; // 背景色 final Color? activeBackgroundColor; // 选定的背景颜色 final BoxBorder? activeBorder; // 选中的边框 final BorderRadiusGeometry? borderRadius; // 圆角 final TextStyle? textStyle; // 文字样式 final TextStyle? activeTextStyle; // 选定的文字样式 const ToolMenuCheckBoxWidget( {Key? key, required this.children, required this.click, this.width, this.height, this.activeBackgroundColor, this.activeBorder, this.selectList, this.backgroundColor, this.borderRadius, this.textStyle, this.activeTextStyle}) : super(key: key); @override State<ToolMenuCheckBoxWidget> createState() => _ToolMenuCheckBoxWidgetState(); } class _ToolMenuCheckBoxWidgetState extends State<ToolMenuCheckBoxWidget> { late List<FindSimilarYouWant> items; late final List _selctedList = widget.selectList ?? []; @override void initState() { // 初始化当前选中 items = widget.children; super.initState(); } // 是否选中 bool eachItems(val) { bool falg = false; for (var ele in _selctedList) { if (ele == val) { falg = true; } } return falg; } @override Widget build(BuildContext context) { return Wrap( spacing: 10.w, runSpacing: 10.w, alignment: WrapAlignment.start, children: widget.children.map((val) { return ToolMenuCheckboxItemWidget( title: val.title, value: val.value, click: (int selectValue) { // bool galg = false; // setState(() { // _selctedList.removeWhere((element) { // galg = true; // return element == selectValue;
// });
// if (!galg) {
// setState(() {
// _selctedList.add(val.value);
// });
// }
// });
if (_selctedList.contains(selectValue)) {
setState(() {
_selctedList.remove(selectValue);
});
} else {
setState(() {
_selctedList.add(selectValue);
});
}
widget.click(_selctedList);
},
width: widget.width,
height: widget.height,
isActive: eachItems(val.value),
backgroundColor: widget.backgroundColor,
textStyle: widget.textStyle,
activeTextStyle: widget.activeTextStyle,
activeBackgroundColor: widget.activeBackgroundColor,
activeBorder: widget.activeBorder,
borderRadius: widget.borderRadius,
);
}).toList(),
);
}
}
试用的代码：
///初始化代码
widget.selectlist = [];
var data = [
{"title": 'aaa', "value": 1},
{"title": 'bbb', "value": 2},
{"title": 'ccc', "value": 3},
{"title": 'ddd', "value": 4},
];
youList = data.map((e) => FindSimilarYouWant.froJson(e)).toList();
builder 的代码
ToolMenuCheckBoxWidget(
width: 105.w,
height: 36.w,
children: youList, ///数据列表
selectList: widget.selectlist, ///默认选中的代码
backgroundColor: const Color(0xFFF3F9FB),
activeBackgroundColor: Colors.white,
activeBorder:
Border.all(width: 1.w, color: const Color(0xFFFF8A00)),
activeTextStyle: TextStyle(
color: const Color(0xFFFF8A00),
fontSize: 14.sp,
fontWeight: FontWeight.w500,
),
textStyle: TextStyle(fontSize: 14.sp),
click: (List selection) {
setState(() {
widget.selectlist = selection; ///接受选中的数据
});
print('======>$selection');
},
)EndTip：
在传递 children 这个Map 列表，进行map遍历去拿到Map里数据的时候 ， 会出现数据格式报错的问题 （超级恶心的问题！！！！），我写了一个models来对传递的children数据 进行类型声明。
代码：
class FindSimilarYouWant {
late String title;
late int value;
FindSimilarYouWant({required this.title, required this.value});
FindSimilarYouWant.froJson(Map<String, dynamic> json) {
title = json['title'];
value = json['value'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = <String, dynamic>{};
data['title'] = title;
data['value'] = value;
return data;
}
}