如何 select 当 select 选中一个复选框时，下拉按钮中的所有复选框都会抖动？

Question

我有一个带有复选框元素的下拉列表。告诉我，我可以做到，以便在选择1个元素时，在我的情况下是All EV's，选中了下拉列表中元素的所有其他复选框，如果您再次单击，则它们消失了？我还是不明白这个是怎么实现的，是不是真的，如果能帮到我，我将不胜感激，也许我白费了，这个功能不能用dropdown来实现。

列表

final List<String> carList = const [
    "All EV's",
    'Main EV',
    '<EV2>',
  ];

下拉

class CheckboxDropdown extends StatefulWidget {
  final List<String> items;
  final SvgPicture? icon;
  final double width;

  const CheckboxDropdown({
    Key? key,
    required this.items,
    this.icon,
    required this.width,
  }) : super(key: key);

  @override
  State<CheckboxDropdown> createState() => _CheckboxDropdown();
}

class _CheckboxDropdown extends State<CheckboxDropdown> {
  String? selectedValue;
  bool selected = false;

  final List _selectedTitles = [];
  final List _selectedTitlesIndex = [];

  final GFCheckboxType type = GFCheckboxType.basic;

  @override
  void initState() {
    super.initState();
    if (widget.items.isNotEmpty) {
      _selectedTitles.add(widget.items[1]);
    }
  }

  void _onItemSelect(bool selected, int index) {
    if (selected == true) {
      setState(() {
        _selectedTitles.add(widget.items[index]);
        _selectedTitlesIndex.add(index);
      });
    } else {
      setState(() {
        _selectedTitles.remove(widget.items[index]);
        _selectedTitlesIndex.remove(index);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(
          offset: const Offset(0, -12),
          items: List.generate(
            widget.items.length,
            (index) => DropdownMenuItem<String>(
              value: widget.items[index],
              child: Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Colors.white.withOpacity(0.1),
                      width: 1,
                    ),
                  ),
                ),
                child: StatefulBuilder(
                  builder: (context, setStateSB) => GFCheckboxListTile(
                    value: _selectedTitles.contains(widget.items[index]),
                    onChanged: (bool selected) {
                      _onItemSelect(selected, index);
                      setStateSB(() {});
                    },
                    selected: selected,
                    title: Text(
                      widget.items[index],
                      style: constants.Styles.smallTextStyleWhite,
                    ),
                    padding: const EdgeInsets.only(top: 12, bottom: 13),
                    margin: const EdgeInsets.only(right: 0, left: 0),
                    size: 22,
                    activeBgColor: constants.Colors.greyCheckbox,
                    activeBorderColor: constants.Colors.greyXMiddle,
                    inactiveBgColor: constants.Colors.greyCheckbox,
                    activeIcon: SvgPicture.asset(constants.Assets.checkboxIcon),
                    inactiveBorderColor: constants.Colors.greyXMiddle,
                    type: type,
                  ),
                ),
              ),
            ),
          ),
          hint: Row(
            children: [
              SvgPicture.asset(constants.Assets.carDropdown),
              const SizedBox(width: 8),
              _selectedTitles.length > 1
                  ? const Text('Selected EV',
                      style: constants.Styles.xSmallHeavyTimerTextStyleWhite)
                  : Text(_selectedTitles.join().toString(),
                      style: constants.Styles.bigBookTextStyleWhite),
              if (_selectedTitles.isEmpty)
                const Text('Select EV',
                    style: constants.Styles.xSmallHeavyTimerTextStyleWhite)
            ],
          ),
          value: selectedValue,
          onChanged: (value) {
            setState(() {
              selectedValue = value as String;
            });
          },
          icon: SvgPicture.asset(constants.Assets.arrowDropdown),
          iconSize: 21,
          buttonHeight: 27,
          itemHeight: 47,
          dropdownMaxHeight: 185,
          dropdownWidth: 140,
          dropdownDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8),
              border: Border.all(
                color: constants.Colors.purpleMain,
              ),
              color: constants.Colors.greyDark),
          selectedItemBuilder: (context) {
            return widget.items.map(
              (item) {
                return Row(
                  children: [
                    widget.icon ?? const SizedBox(),
                    const SizedBox(width: 8),
                    Text(
                      item,
                      style: constants.Styles.bigBookTextStyleWhite,
                    ),
                  ],
                );
              },
            ).toList();
          },
        ),
      ),
    );
  }
}

Answer 1

将您选择的变量更改为列表布尔值在 GFCheckboxListTile 的 onChanged 中添加一些代码，

if(indexSelected==all) change list all value selected to true
setstate

Answer 2

将您的 _onItemSelect 函数更新为如下内容：

void _onItemSelect(bool selected, int index) {
    if (selected == true) {
      setState(() {
       
        //Check if its "All EV's" index
        if (index == 0) {
          _selectedTitles = List.from(widget.items);
          _selectedTitlesIndex = List.generate(widget.items.length, (index) => index);
        } else{
          _selectedTitles.add(widget.items[index]);
          _selectedTitlesIndex.add(index);
        }
      });
    } else {
      setState(() {
        if (index == 0) {
          _selectedTitles.clear();
          _selectedTitlesIndex.clear();
        } else{
          _selectedTitles.remove(widget.items[index]);
          _selectedTitlesIndex.remove(index);
        }
      });
    }
  }

如何 select 当 select 选中一个复选框时，下拉按钮中的所有复选框都会抖动？

How to select all checkboxes in dropdownbutton flutter when selecting one checkbox?

dart

flutter