flutter - 如何在 Flutter 中更新 ModalBottomSheet 的状态？

Question

这段代码非常简单:显示一个模式底部表单，当用户单击按钮时，表单的高度会增加 10。

但是什么也没发生。实际上，只有当用户用手指“滑动”底部工作表时，它才会更新其大小(我相信滑动会导致工作表上发生内部 setState)。

我的问题是:如何调用 ModalBottomSheet 的更新状态？

showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        height: heightOfModalBottomSheet,
        child: RaisedButton(

            onPressed: () {
              setState(() {
                heightOfModalBottomSheet += 10;
              });

            }),
      );
    });

Answer 1

您可以使用 Flutter 的 StatefulBuilder 来包装您的 ModalBottomSheet，如下所示:

showModalBottomSheet(
    context: context,
    builder: (context) {
      return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState /*You can rename this!*/) {
        return Container(
          height: heightOfModalBottomSheet,
          child: RaisedButton(onPressed: () {
            setState(() {
              heightOfModalBottomSheet += 10;
            });
          }),
        );
      });
});

请注意，新的 setState 将覆盖您的主小部件 setState 但请确保您可以重命名它，以便您能够设置父小部件和模态的

//This sets modal state
setModalState(() {
    heightOfModalBottomSheet += 10;
});
//This sets parent widget state
setState(() {
     heightOfModalBottomSheet += 10;
});