checkbox_button.dart 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import 'package:flutter/material.dart';
  2. /// 按钮式多选框组
  3. class VCheckBoxButtonGroup<T, TValue> extends StatefulWidget {
  4. final List<T> source;
  5. final List<TValue>? values;
  6. final String Function(T data) labelGetter;
  7. final TValue Function(T data) valueGetter;
  8. final ValueChanged<List<TValue>>? onChanged;
  9. final double? itemWidth;
  10. const VCheckBoxButtonGroup({
  11. super.key,
  12. required this.source,
  13. this.values,
  14. required this.labelGetter,
  15. required this.valueGetter,
  16. this.onChanged,
  17. this.itemWidth,
  18. });
  19. @override
  20. State<StatefulWidget> createState() => _VCheckBoxGroupState<T, TValue>();
  21. }
  22. class _VCheckBoxGroupState<T, TValue>
  23. extends State<VCheckBoxButtonGroup<T, TValue>> {
  24. late List<TValue> _checkedValues;
  25. @override
  26. void initState() {
  27. if (widget.values != null) {
  28. _checkedValues = List.from(widget.values!);
  29. } else {
  30. _checkedValues = [];
  31. }
  32. super.initState();
  33. }
  34. @override
  35. Widget build(BuildContext context) {
  36. final children = <Widget>[];
  37. final length = widget.source.length;
  38. for (var i = 0; i < length; i++) {
  39. final e = widget.source[i];
  40. final value = widget.valueGetter(e);
  41. final isChecked = _checkedValues.contains(value);
  42. // children.add(
  43. // SizedBox(
  44. // width: widget.itemWidth ?? 160,
  45. // child: VCheckBoxButton(
  46. // label: widget.labelGetter(e),
  47. // isChecked: isChecked,
  48. // onChanged: (status) {
  49. // _onItemChanged(value, status);
  50. // },
  51. // ),
  52. // ),
  53. // );
  54. // TODO:
  55. children.add(
  56. VCheckBoxButton(
  57. label: widget.labelGetter(e),
  58. isChecked: isChecked,
  59. onChanged: (status) {
  60. _onItemChanged(value, status);
  61. },
  62. ),
  63. );
  64. }
  65. return Wrap(
  66. spacing: 12,
  67. runSpacing: 8,
  68. children: children,
  69. );
  70. }
  71. void _onItemChanged(TValue value, bool isChecked) {
  72. if (isChecked) {
  73. if (_checkedValues.contains(value) == false) {
  74. _checkedValues.add(value);
  75. }
  76. } else {
  77. _checkedValues.remove(value);
  78. }
  79. widget.onChanged?.call(_checkedValues);
  80. }
  81. }
  82. /// 按钮式多选框
  83. class VCheckBoxButton extends StatefulWidget {
  84. /// 文本
  85. final String label;
  86. /// 是否默认选中
  87. final bool? isChecked;
  88. /// 选中状态变更
  89. final ValueChanged<bool>? onChanged;
  90. const VCheckBoxButton({
  91. super.key,
  92. required this.label,
  93. this.isChecked,
  94. this.onChanged,
  95. });
  96. @override
  97. State<StatefulWidget> createState() => _VCheckBoxState();
  98. }
  99. class _VCheckBoxState extends State<VCheckBoxButton> {
  100. bool _isChecked = false;
  101. @override
  102. void initState() {
  103. if (widget.isChecked != null) {
  104. _isChecked = widget.isChecked!;
  105. }
  106. super.initState();
  107. }
  108. @override
  109. Widget build(BuildContext context) {
  110. const height = 56.0;
  111. const borderRadius = height / 2;
  112. final primaryColor = Theme.of(context).primaryColor;
  113. return Material(
  114. child: Ink(
  115. child: InkWell(
  116. borderRadius: BorderRadius.circular(borderRadius),
  117. onTap: () {
  118. setState(() {
  119. _isChecked = !_isChecked;
  120. widget.onChanged?.call(_isChecked);
  121. });
  122. },
  123. child: Container(
  124. padding: const EdgeInsets.only(left: 0, right: borderRadius),
  125. alignment: Alignment.center,
  126. height: height,
  127. // constraints: const BoxConstraints(minWidth: 160),
  128. decoration: BoxDecoration(
  129. color: _isChecked ? primaryColor : Colors.white,
  130. borderRadius: BorderRadius.circular(borderRadius),
  131. border: _isChecked ? null : Border.all(color: primaryColor),
  132. ),
  133. child: Row(
  134. mainAxisSize: MainAxisSize.min,
  135. crossAxisAlignment: CrossAxisAlignment.center,
  136. children: [
  137. if (_isChecked) ...[
  138. const Icon(
  139. Icons.check_rounded,
  140. color: Colors.green,
  141. size: 24,
  142. ),
  143. const SizedBox(width: 8),
  144. ],
  145. if (!_isChecked) const SizedBox(width: 32),
  146. Text(
  147. widget.label,
  148. style: TextStyle(
  149. color: _isChecked ? Colors.white : primaryColor,
  150. fontSize: 20,
  151. ),
  152. ),
  153. ],
  154. ),
  155. ),
  156. ),
  157. ),
  158. );
  159. }
  160. }