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

不少人在使用 showDialog 或者 showModalBottomSheet 的时候，都会遇到这个问题：经过 setState 方法没法更新当前的dialog。

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

那么，如何更新dialog中的内容呢？答案是使用StatefulBuilder。

代码以下：

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(() {});  }, ); }, ); });

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"), ), ], ), ), ),         }       ）   })

以上。

本文分享自微信公众号 - iOS小生活（iOSHappyLife）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。