123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- import 'package:flutter/material.dart';
- /// 多选框组
- class VCheckBoxGroup<T, TValue> extends StatefulWidget {
- final List<T> source;
- final List<TValue>? values;
- final String Function(T data) labelGetter;
- final TValue Function(T data) valueGetter;
- final ValueChanged<List<TValue>>? onChanged;
- final double? itemSpace;
- const VCheckBoxGroup({
- super.key,
- required this.source,
- this.values,
- required this.labelGetter,
- required this.valueGetter,
- this.onChanged,
- this.itemSpace,
- });
- @override
- State<StatefulWidget> createState() => _VCheckBoxGroupState<T, TValue>();
- }
- class _VCheckBoxGroupState<T, TValue> extends State<VCheckBoxGroup<T, TValue>> {
- late List<TValue> _checkedValues;
- @override
- void initState() {
- _checkedValues = widget.values ?? [];
- super.initState();
- }
- @override
- Widget build(BuildContext context) {
- final children = <Widget>[];
- final length = widget.source.length;
- for (var i = 0; i < length; i++) {
- final e = widget.source[i];
- children.add(
- VCheckBox(
- label: widget.labelGetter(e),
- isChecked: false,
- onChanged: (value) {
- _onItemChanged(e, value);
- },
- ),
- );
- if (i < length - 1) {
- children.add(SizedBox(width: widget.itemSpace));
- }
- }
- // return Flow(
- // delegate: FlowlayoutDelegate(),
- // children: children,
- // );
- return Row(
- mainAxisSize: MainAxisSize.min,
- children: children,
- );
- }
- void _onItemChanged(T data, bool isChecked) {
- final value = widget.valueGetter(data);
- if (isChecked) {
- if (_checkedValues.contains(value) == false) {
- _checkedValues.add(value);
- }
- } else {
- _checkedValues.remove(value);
- }
- widget.onChanged?.call(_checkedValues);
- }
- }
- /// 多选框
- class VCheckBox extends StatefulWidget {
- /// 文本
- final String label;
- /// 是否默认选中
- final bool? isChecked;
- /// 选中状态变更
- final ValueChanged<bool>? onChanged;
- const VCheckBox({
- super.key,
- required this.label,
- this.isChecked,
- this.onChanged,
- });
- @override
- State<StatefulWidget> createState() => _VCheckBoxState();
- }
- class _VCheckBoxState extends State<VCheckBox> {
- bool _isChecked = false;
- @override
- void initState() {
- if (widget.isChecked != null) {
- _isChecked = widget.isChecked!;
- }
- super.initState();
- }
- @override
- Widget build(BuildContext context) {
- return Material(
- child: Ink(
- child: InkWell(
- onTap: () {
- setState(() {
- _isChecked = !_isChecked;
- widget.onChanged?.call(_isChecked);
- });
- },
- child: Container(
- padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
- alignment: Alignment.center,
- child: Row(
- mainAxisSize: MainAxisSize.min,
- crossAxisAlignment: CrossAxisAlignment.center,
- children: [
- _CheckStatusTag(isChecked: _isChecked),
- const SizedBox(width: 6),
- Text(
- widget.label,
- style: const TextStyle(color: Colors.black, fontSize: 16),
- ),
- ],
- ),
- ),
- ),
- ),
- );
- }
- }
- class _CheckStatusTag extends StatelessWidget {
- final bool isChecked;
- const _CheckStatusTag({super.key, required this.isChecked});
- @override
- Widget build(BuildContext context) {
- final color = Theme.of(context).primaryColor;
- return Container(
- alignment: Alignment.center,
- width: 18,
- height: 18,
- decoration: BoxDecoration(
- color: isChecked ? color : Colors.white,
- border: Border.all(width: 1, color: color),
- borderRadius: BorderRadius.zero,
- // boxShadow: [],
- ),
- child: isChecked
- ? const Icon(Icons.check, size: 16, color: Colors.white)
- : null,
- );
- }
- }
|