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

我也面临着同样的问题。这是一个小技巧，您需要在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中，新的状态是 mystate

Answer 2

这里的问题是您创建的BottomSheet 不属于您的StatefulWidget 。如果仅出于在setState内使用showModalBottomSheet的目的而使窗口小部件变为有状态的状态，则可以立即还原该更改。

您真正想做的是在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的值移到了builder的{{1}}函数中。

如果您还想在原始BottomSheet中使用b的值，则可以将其再次移出，并且可能也要调用StatefulWidget来进行更新另一个小部件（仅在需要更新时）。

如何在showModalBottomSheet中设置状态

2 个答案: