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(),
        )
      ],
    );
  }
}

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

flutter大佬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值