您好,欢迎来到华佗小知识。
搜索
您的当前位置:首页flutter单选多选框,

flutter单选多选框,

来源:华佗小知识
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(),
        )
      ],
    );
  }
}

代码记录,有问题的评论区留言哦~

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- huatuo0.cn 版权所有 湘ICP备2023017654号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务