更新复选框列表数组时 Flutter Widget 状态不一致

Question

我有一个使用 flutter_multi_select_items 包的有状态小部件。我遇到的问题是交替状态仅在第一次单击时更改一次。我希望默认情况下取消单击复选框，但所选输入需要一个值，并且在每次状态更改事件后该值保持为 true。 如何正确地交替从复选框数组中添加/删除 id 值并使状态与添加和删除的值保持同步？

日志

flutter: true
flutter: 1
flutter: removing add on
flutter: []

Performing hot reload...                                                
Reloaded 1 of 1718 libraries in 426ms (compile: 21 ms, reload: 156 ms, reassemble: 174 ms).
flutter: false
flutter: adding add-on
flutter: [1]
flutter: true
flutter: removing add on
flutter: []
flutter: true

class _AddServiceState extends State<AddService> {
  final MultiSelectController<dynamic> _multiSelectcontroller = MultiSelectController();
   
  Widget build(BuildContext context) {
   List<dynamic> _addOns = widget.service_profile['service_add_ons'];
   List<dynamic> checkAddons = [];
   return MaterialApp(
        home: Scaffold(
         appBar: AppBar(title: 'Adjust your add-ons')
        ),
        body: SingleChildScrollView(
          physics: AlwaysScrollableScrollPhysics(),
          child: Column(children: <Widget>[
                ElevatedButton(
                                  onPressed: () {
                                    _multiSelectcontroller.selectAll();
                                  },
                                  child: const Text('Select All')),
                              Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    MultiSelectCheckList(
                                      maxSelectableCount: 5,
                                      textStyles: const MultiSelectTextStyles(
                                          selectedTextStyle: TextStyle(
                                              color: Colors.white,
                                              fontWeight: FontWeight.bold)),
                                      itemsDecoration: MultiSelectDecorations(
                                          selectedDecoration: BoxDecoration(
                                              color: Colors.indigo
                                                  .withOpacity(0.8))),
                                      listViewSettings: ListViewSettings(
                                          separatorBuilder: (context, index) =>
                                              const Divider(
                                                height: 0,
                                              )),
                                      controller: _multiSelectcontroller,
                                      items: List.generate(
                                          _addOns.length,
                                          (index) => CheckListCard(
                                              value: _addOns[index]['id'],
                                              title:
                                                  Text(_addOns[index]['title']),
                                              subtitle:
                                                  Text(_addOns[index]['price']),
                                              selectedColor: Colors.white,
                                              checkColor: Colors.indigo,
                                              selected:
                                                  checkedAddons.indexOf(_addOns[index]['id'], index) == index,
                                              enabled: true,
                                              checkBoxBorderSide:
                                                  const BorderSide(
                                                      color: Colors.blue),
                                              shape: RoundedRectangleBorder(
                                                  borderRadius:
                                                      BorderRadius.circular(
                                                          5)))),
                                      onChange:
                                          (allSelectedItems, selectedItem) {
                                        if (allSelectedItems.isNotEmpty) {
                                          checkedAddons = [];
                                          checkedAddons
                                              .addAll(allSelectedItems);
                                          return;
                                        }

                                        print(checkedAddons
                                            .contains(selectedItem));
                                        if (checkedAddons
                                            .contains(selectedItem)) {
                                          print('removing add on');

                                          setState(() {
                                            checkedAddons.removeWhere((item) => item == selectedItem);
                                          });

                                          print(checkedAddons);
                                        } else {
                                          print('adding add-on');
                                          setState(() {
                                            checkedAddons.add(selectedItem);
                                          });
                                          print(checkedAddons);
                                        }
                                      },
                                      onMaximumSelected:
                                          (allSelectedItems, selectedItem) {
                                        //    CustomSnackBar.showInSnackBar(
                                        //       'The limit has been reached', context);
                                      },
                                    )
       
]
         )
     )
  }
});

Answer 1

如果在使用 setState() 时将

checkAddons

放入

build

方法中，则调用方法构建，然后

checkAddons

将重置为

[]

的默认值，这将导致此错误。解决方案是将

checkAddons

放在

build

方法

之外