Flutter更新showDialog以及showModalBottomSheet中的状态中的内容

发布于 5 年前 作者 phonegap100 4414 次浏览 来自 分享

Flutter更新showDialog以及ModalBottomSheet中的状态中的内容

1、Flutter更新showDialog中的状态中的内容

很多人在用showDialog的时候应该都遇到过这个问题，使用showDialog后，通过setState()无法更新当前dialog。其实原因很简单，因为dialog其实是另一个页面，准确地来说是另一个路由，因为dialog的关闭也是通过navigator来pop的，所以它的地位跟你当前主页面一样。这个概念一定要明确，因为无论在Android或iOS中，daliog都是依附于当前主页面的一个控件，但是在Flutter中不同，它是一个新的路由。所以使用当前主页面的setState()来更新，当然没法达到你要的效果。

StatefulBuilder

很多人使用StatefulBuilder依然达不到更新的效果，是因为你用错了setState()方法。

就像我们上面说的那样，这个builder构建的控件，不会响应老页面的任何操作，因为它们是两个互不影响的路由控制的。


showDialog(
 context: context,
 builder: (context) {
     String label = 'test';
     return StatefulBuilder(
         builder: (context, state) {
             print('label = $label');
             return GestureDetector(
                 child: Text(label),
                 onTap: () {
                     label = 'test8';
                     print('onTap:label = $label');
                     // 注意不是调用老页面的setState，而是要调用builder中的setState。
                     //在这里为了区分，在构建builder的时候将setState方法命名为了state。
                     state(() {});  
                 },
             );
         },
      );
 });

2、Flutter 更新showModalBottomSheet中的状态（state）

和上面一样的showModalBottomSheet也会有这样的问题。解决方法如下

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"),
                                  ),
                                ],
                              ),
 ),
        ),
}
）
}
回到顶部