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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。