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

Z时代
2024-01-10
分类：问答

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

但是什么也没发生。实际上，只有在用户用手指“滑动”底部工作表的情况下，它才会更新其大小（我相信滑动会在工作表上产生内部setState）。

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

showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        height: heightOfModalBottomSheet,
        child: RaisedButton(
            onPressed: () {
              setState(() {
                heightOfModalBottomSheet += 10;
              });
            }),
      );
    });

回答：

您也许可以使用中showBottomSheet的ScaffoldState。在此阅读更多有关showBottomSheet的信息。

这将显示bottomSheet并返回一个控制器PersistentBottomSheetController。使用此控制器，您可以调用controller.SetState((){})它将重新渲染bottomSheet的内容。

这是一个例子

PersistentBottomSheetController _controller; // <------ Instance variable
final _scaffoldKey = GlobalKey<ScaffoldState>(); // <---- Another instance variable
.
.
.
void _incrementBottomSheet(){
    _controller.setState(
        (){
            heightOfModalBottomSheet += 10;
        }
    )
}
.
void _createBottomSheet() async{
  _controller = await _scaffoldKey.currentState.showBottomSheet(
        context: context,
        builder: (context) {
           return Container(
               height: heightOfModalBottomSheet,
               child: RaisedButton(
               onPressed: () {
                  _incrementBottomSheet()
              }),
         );
      });
}