如何在 showModalBottomSheet 中设置状态答案

【问题标题】：How to setState inside showModalBottomSheet如何在 showModalBottomSheet 中设置状态
【发布时间】：2019-06-10 16:20:52
【问题描述】：

BottomSheet 中是否存在无法更新小部件状态的限制？正如您在下面的示例中看到的那样，我使用的是 Switch，但它的显示没有改变，尽管值更新了，只是它不会再次重新渲染。

这现在是 StatefulWidget 的一部分。

我在使用 DropdownButton 小部件时遇到了同样的问题。这些都可以在正常页面中正常工作。

有人知道吗？

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return BottomSheet(
      onClosing: () {},
      builder: (BuildContext context) {
        return Switch(
          onChanged: (bool v) {
            debugPrint('v is ${v.toString()}');
            // b = v; <<-- This is also not working when using StatelessWidget
            setState(() => b = v);
            debugPrint(b.toString());
          },
          value: b,
        );
      },
    );
  },
);

【问题讨论】：

查看我对类似问题的回答：stackoverflow.com/a/56321614/6374527

标签： flutter dart

【解决方案1】：

这里的问题是您正在创建的BottomSheet 不属于您的StatefulWidget。如果您只是为了在 showModalBottomSheet 内部使用 setState 而使您的小部件有状态，您现在可以恢复该更改。

您真正想做的是在BottomSheet 中设置状态。您可以通过将StatefulWidget 传递给builder 或使用StatefulBuilder 来做到这一点，为了简单起见，我将在此示例中这样做：

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return BottomSheet(
      onClosing: () {},
      builder: (BuildContext context) {
        bool b = false;
        return StatefulBuilder(
          builder: (BuildContext context, setState) => Switch(
            onChanged: (bool v) {
              setState(() => b = v);
            },
            value: b,
          ),
        );
      },
    );
  },
);

我还在BottomSheet 的builder 函数中移动了b 值。

如果您还想在原来的StatefulWidget 中使用b 的值，您可以再次将其移出，并且您可能还想调用this.setState 来更新另一个小部件（仅当你需要它来更新）。

【讨论】：

谢谢。我正在考虑通过 StatefulWidget，但这也可以。但是我同时使用 BLOC 来更新小部件。

【解决方案2】：

我也遇到了同样的问题。这是一个小技巧，您需要在 showModalBottomSheet 中插入StatefulBuilder。既然答案来得太晚了，我将使用不同的代码让那里的人使用复选框轻松理解。

showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
    mpesachecked =false;
    return StatefulBuilder(builder: (BuildContext context, StateSetter mystate) {
          return Padding(
          padding: const EdgeInsets.fromLTRB(10.0, 70.0, 20.0, 20.0),
          child: Column(
            children: <Widget>[
                 Checkbox(
                      value: mpesachecked,
                      activeColor: Colors.green,
                      onChanged: (value) {
                        mystate(() {
                          mpesachecked = value;
                        });
                      }),
                 ])
                 ));
               });
    )

注意：showModalBottomSheet 中的新 state 是 mystate

【讨论】：