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,351评论 1 36
  • 转自 Q吹个大气球Q 本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步...
    chilim阅读 1,170评论 0 17
  • 本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局。...
    Q吹个大气球Q阅读 7,657评论 6 49
  • 原文在此,此处只为学习 Widget与ElementWidget主要接口Stateless WidgetState...
    lltree阅读 3,377评论 0 1
  • 插入背景图时,为了保证图片与盒子边距有一定的距离,可以直接使用background-position属性的扩展语法...
    Elevens_regret阅读 56评论 0 0