Flutter 更新ModalBottomSheet中的状态（state）

2023年3月30日 2,083次阅读 来源: 五月天外飞仙

Flutter中的ModalBottomSheet是一个底部弹窗，使用showModalBottomSheet可以调用它。

大致使用方法为

  showModalBottomSheet(context:context, builder:(BuildContext context){
          return Container(
              child:OutlineButton(
                          child:Text("aa")
            ),
        ),
}

但是如果我们要更改他的状态时。假设我点击这个button，aa就变为bb。

一般的做法为：

bool btnState=false;
 showModalBottomSheet(context:context, builder:(BuildContext context){
          return Container(
                  child:OutlineButton(
                      onPressed: (){
                                setState(() {
                                  btnState=!btnState;
                                });
                              },
                      child:Stack(
                                children: <Widget>[
                                  Opacity(
                                    opacity: btnState ? 0.0 : 1.0,
                                    child: Text("aa"),
                                  ),
                                  Opacity(
                                      opacity: btnState ? 1.0 : 0.0,
                                      child: Text("bb"),
                                  ),
                                ],
                              ),
 ),
        ),
}

这在一般的statefulwidget里是可行的，但是在modalbottomsheet中却是不可行的。（不信你可以试一下）

具体原因是这里调用setState的话，是更新showModalBottomSheet所在的class的状态，可以理解为showModalBottomSheet打开了一个新的页面，而这个setState更新的是老页面。那更新老页面的方法更新新页面当然不能成功啦。（前朝的剑斩今朝的官？）

Q：那我要在这里面修改布局状态要怎么做呢？

问得好，这里就要引入一个工具StatefulBuilder了

bool btnState=false;
 showModalBottomSheet(context:context, builder:(BuildContext context){
          return StatefulBuilder(
          builder:(context1, state) {///这里的state就是setState
            return Container(
                  child:OutlineButton(
                      onPressed: (){
                               state(() {///为了区分把setState改个名字
                                  btnState=!btnState;
                                });
                              },
                      child:Stack(
                                children: <Widget>[
                                  Opacity(
                                    opacity: btnState ? 0.0 : 1.0,
                                    child: Text("aa"),
                                  ),
                                  Opacity(
                                      opacity: btnState ? 1.0 : 0.0,
                                      child: Text("bb"),
                                  ),
                                ],
                              ),
 ),
        ),
}
）
}

为当前页面构建一个builder，这样才能使用setState更新当前页面的状态

    原文作者：五月天外飞仙
    原文地址: https://www.jianshu.com/p/949a638cd465
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞