美文网首页
Flutter更新showDialog以及showModalBo

Flutter更新showDialog以及showModalBo

作者: 禄子_c79b | 来源:发表于2023-12-04 10:31 被阅读0次
    很多人在使用 showDialog 或者 showModalBottomSheet 的时候,都会遇到这个问题:通过 setState 方法无法更新当前的dialog。

    原因其实很简单,dialog本质上是另一个页面,确切点说是另一个路由,它的地位跟你当前主页面是一样的。在Android或者iOS中,dialog都是依附于当前主页面的一个控件,但是在Flutter中它是一个新的路由。所以,你使用当前页面的 setState 方法当然是没法更新dialog中的内容的。

    bool btnState=false;
    showModalBottomSheet(
       context:context, 
       builder:(BuildContext context){
           return StatefulBuilder(
             //在这里为了区分,在构建builder的时候将setState方法命名为了setBottomSheetState。
             builder:(context1, setBottomSheetState) {
               return Container(
                      child:OutlineButton(
                          onPressed: (){
                                   // 注意不是调用老页面的setState,而是要调用builder中的setBottomSheetState
                                   setBottomSheetState(() {
                                      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"),
                                      ),
                                    ],
                          ),
                      ),
               ),
             }
           )
       }
    )
    
    showDialog(
     context: context,
     builder: (context) {
         String label = 'test';
         //StatefulBuilder
         return StatefulBuilder(
             //在这里为了区分,在构建builder的时候将setState方法命名为了setDialogState。
             builder: (context, setDialogState) {
                 print('label = $label');
                 return GestureDetector(
                     child: Text(label),
                     onTap: () {
                         label = 'test8';
                         print('onTap:label = $label');
                         // 注意不是调用老页面的setState,而是要调用builder中的setDialogState。
                         setDialogState(() {});  
                     },
                 );
             },
          );
     });
    

    相关文章

      网友评论

          本文标题:Flutter更新showDialog以及showModalBo

          本文链接:https://www.haomeiwen.com/subject/yvnlgdtx.html