Question

在我的仪表盘中，我有一个...图标，每当单击它时，它将显示包含复选框的底部工作表。但是每当我选中/取消选中该框时，状态都不会改变，那我就在调用setState，以便其重新呈现整个仪表板，而不是底部表单，因此当我再次单击...图标时，更改将反映在底页。如何解决这个问题呢？我只希望在那时更新。请为此提供帮助

 Map<String, bool> data = {"1": true, "2": false, "3": true};

          void _showModalSheet() {
            List<Map<String, Object>> chec

kbox;
        checkbox = [
          {"id": "1", "displayId": "check1"},
          {"id": "2", "displayId": "check2"},
          {"id": "3", "displayId": "check3"}
        ];

        showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return StatefulBuilder(
                  builder: (BuildContext context, StateSetter state) {
                return createBox(context, checkbox, state);
              });
            });
      }

      createBox(
          BuildContext context, List<Map<String, Object>> si, StateSetter state) {
        var metrics = si.map<Widget>((data) {
          var id = data["id"];
          var dispId = data["displayId"];
          return buildCheckbox(context, id, dispId, state);
        }).toList();

        return SingleChildScrollView(
          child: LimitedBox(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: metrics,
            ),
          ),
        );
      }

      void ItemChange(bool val, var id) {
        setState(() {
          data[id] = val;
        });
      }

      Widget buildCheckbox(
          BuildContext context, var id, var disp, StateSetter state) {
        List<String> selectedSiList = [];
        var a = 0;
        return Container(
            child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
          CheckboxListTile(
              value: data[id],
              title: Text(disp),
              controlAffinity: ListTileControlAffinity.leading,
              onChanged: (bool val) {
                ItemChange(val, id);
              })
        ]));
      }

Answer 1

在此函数中传递StateSetter

void ItemChange(bool val, var id, StateSetter state) {
        state(() { //use that state here
          data[id] = val;
        });
      }

只有StatefulBuilder会更改bottomSheet内部的数据。

Answer 2

我对您的代码进行了一些更改，请检查它是否对您有用

List<CheckBoxData> checkboxDataList = [
    new CheckBoxData(id: '1', displayId: 'check1', checked: true),
    new CheckBoxData(id: '2', displayId: 'check2', checked: false),
   new CheckBoxData(id: '3', displayId: 'check3', checked: true),
  ];

  void _showModalSheet() {
    showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter state) {
            return SingleChildScrollView(
              child: LimitedBox(
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: checkboxDataList.map<Widget>(
                    (data) {
                      return Container(
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            CheckboxListTile(
                              value: data.checked,
                              title: Text(data.displayId),
                              controlAffinity: ListTileControlAffinity.leading,
                              onChanged: (bool val) {
                                state(() {
                                  data.checked = !data.checked;
                                });
                              },
                            ),
                          ],
                        ),
                      );
                    },
                  ).toList(),
                ),
              ),
            );
          },
        );
      },
    );
  }

class CheckBoxData {
  String id;
  String displayId;
  bool checked;

  CheckBoxData({
    this.id,
    this.displayId,
    this.checked,
  });

  factory CheckBoxData.fromJson(Map<String, dynamic> json) => CheckBoxData(
        id: json["id"] == null ? null : json["id"],
        displayId: json["displayId"] == null ? null : json["displayId"],
        checked: json["checked"] == null ? null : json["checked"],
      );

  Map<String, dynamic> toJson() => {
        "id": id == null ? null : id,
        "displayId": displayId == null ? null : displayId,
        "checked": checked == null ? null : checked,
      };
}

处理扑扑中的复选框状态

2 个答案: