Flutter 更新ModalBottomSheet中的状态(state)

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更新当前页面的状态

推荐阅读更多精彩内容

  • 上一节我们熟悉了初始化后的flutter的界面。这一节,我们就来重点了解一下这部分的内容。 StatelessWi...
    deep_sadness阅读 5,844评论 1 36
  • 转自 Q吹个大气球Q 本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步...
    chilim阅读 1,504评论 0 17
  • 本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局。...
    Q吹个大气球Q阅读 9,025评论 6 51
  • 原文在此,此处只为学习 Widget与ElementWidget主要接口Stateless WidgetState...
    lltree阅读 4,190评论 0 1
  • 插入背景图时,为了保证图片与盒子边距有一定的距离,可以直接使用background-position属性的扩展语法...
    Elevens_regret阅读 60评论 0 0
  • 花开的季节,我遇到的那个做文案的姑娘 我那一年见到晓青的时候还很年轻,公司在深圳的一个繁华地段。出门左拐,房价都约...
    欧阳度2015阅读 2,414评论 0 12
  • 这个周末没有什么特别,昨天出门帮新晋妈妈的朋友买了母婴用品邮寄,今天在家看书做饭。但平凡的周末却值得一份大大的自我...
    欣喜的赤子阅读 132评论 0 1
  • 前两天刘老师讲了一节关于时间管理的课,我给她的留言是时间就像海绵里的水,挤一挤就有了,但是老师说,你如果说仅仅把时...
    那一朵菩提花阅读 275评论 0 2
  • 第十一章 太平天国最后的战役 在奕䜣和慈禧的联合主政下,曾国藩得到了坚定的支持,进入一生中难得的顺境。看...
    君君55555阅读 358评论 0 0