如何在 showModalBottomSheet 中设置状态

Question

我们无法更新小部件状态的 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,
        );
      },
    );
  },
);

Answer 1

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

你真正想做的是在你的BottomSheet. 您可以通过将 a 传递StatefulWidget给 thebuilder或使用 aStatefulBuilder来做到这一点，为了简单起见，我将在本示例中这样做：

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

我也感动了b内在价值builder的功能BottomSheet。

如果您还想使用b原始内部的值StatefulWidget，您可以再次将其移出，并且您可能还想调用this.setState以更新其他小部件（仅当您需要更新时）。

Answer 2

我也面临同样的问题。这是一个小技巧，你需要StatefulBuilder在showModalBottomSheet中插入。我将使用不同的代码让其他人使用复选框轻松理解，因为答案来得太晚了。

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 中的新状态是mystate