Dart 如何在 showModalBottomSheet 中设置状态

发布于06月11日

底部表单中是否有任何限制，我们无法更新小部件状态？正如你在下面的例子中看到的，我使用了一个switch ，但它的显示没有改变，虽然值会更新，但它不会再次重新渲染.

这现在是StatefWidget的一部分.

我在使用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,
        );
      },
    );
  },
);

推荐答案

这里的问题是，您正在创建的BottomSheet是您的StatefulWidget的not part of.如果您只是为了在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,
          ),
        );
      },
    );
  },
);

我还将b值移到了BottomSheet的builder函数中.

如果你想在原来的StatefulWidget中也使用b的值，你会再次将其移出，你可能还想调用this.setState来更新另一个小部件(仅当你需要它更新时).