class CustomSelectableList extends StatefulWidget {
final Map options;
final bool isMultiSelect;
final Function(Map<String, bool>) onSelectionChanged;
final double pWidth;
final TextStyle pFontSize1;
final TextStyle pFontSize2;
const CustomSelectableList({
required this.options,
this.isMultiSelect = false,
this.pWidth = 102,
this.pFontSize1 = CustomTextStyle.text12_5,
this.pFontSize2 = CustomTextStyle.text12_8,
required this.onSelectionChanged,
});
@override
_CustomSelectableListState createState() => _CustomSelectableListState();
}
class _CustomSelectableListState extends State<CustomSelectableList> {
late Map<String, bool> selectedOptions;
@override
void initState() {
super.initState();
setState(() {
selectedOptions = Map.from(widget.options);
});
}
void handleOptionSelected(String option) {
setState(() {
if (!widget.isMultiSelect) {
selectedOptions = {option: true};
} else {
selectedOptions[option] = !selectedOptions[option]!;
}
});
widget.onSelectionChanged(selectedOptions);
}
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 12,
runSpacing: 12,
alignment: WrapAlignment.start,
children: widget.options.keys.map((category) {
bool isSelected = selectedOptions[category] ?? false;
return GestureDetector(
onTap: () => handleOptionSelected(category),
onLongPress: () {
if (!widget.isMultiSelect) {
handleOptionSelected(category);
}
},
child: Container(
height: 34,
width: widget.pWidth,
decoration: BoxDecoration(
color: isSelected
? Color(0xFFFFFFFF).withOpacity(1.0)
: Color(0xFFF7F7F7).withOpacity(1.0),
border: Border.all(
color: isSelected ? Color(0xFFD32367) : Color(0xFFF7F7F7),
width: 0.5,
),
borderRadius: BorderRadius.circular(4),
),
alignment: Alignment.center,
child: Text(
category,
softWrap: false,
style: isSelected ? widget.pFontSize1 : widget.pFontSize2,
),
),
);
}).toList(),
)
],
);
}
}
代码记录,有问题的评论区留言哦~