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

问题描述

此代码非常简单:显示一个有模态的底部工作表，当用户单击按钮时，它会将工作表的高度增加10.

This code is very simple: shows a modal bottom sheet and when the uses clicks the button, it increases the height of the sheet by 10.

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

But nothing happens. Actually, it only updates its size if the user "slides" the bottom sheet with it's finger (I belive that swipe causes a internal setState on the sheet).

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

My question is: how do I call the update state of a ModalBottomSheet?

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

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

            }),
      );
    });

推荐答案

您也许可以使用ScaffoldState中的showBottomSheet.有关此showBottomSheet的更多信息，请此处.

You can maybe use the showBottomSheet from the ScaffoldState. read more here about this showBottomSheet.

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

This will show the bottomSheet and return a controller PersistentBottomSheetController. with this controller you can call controller.SetState((){}) which will re-render the 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()
              }),
         );
      });
}

这篇关于如何在Flutter中更新ModalBottomSheet的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！