专栏首页iOS小生活Flutter更新showDialog以及showModalBottomSheet中的状态中的内容

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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter实战 | 从 0 搭建「网易云音乐」APP(一、创建项目、添加插件、通用代码)

    本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来。

    Flutter笔记
  • uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架。 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多...

    达达前端
  • 我常用的iOS开源库

    OC库和Swift库相似功能的很多 选择的建议是:如果OC库在Swift中完全能用 就优先用OC库 原因是:Swift语言还是不太稳定 语言一更新 程序一大改 ...

    剑行者
  • jQuery基础--插件

    官方API:http://api.jqueryui.com/category/all/

    eadela
  • Pywinauto之Windows UI 自动化1

    前言,公司要搭建自动化测试环境,涉及到对设备软件的烧录操作,在网上找了些资料,发现pywinauto这个python库,能很好的支持PC端跑自动化,为此,记录下...

    用户6367961
  • 以开发者为中心的小程序生态

    小程序现有的开发模式是基于已有的小程序基础库提供的组件,通过自定义业务的样式实现自定义化和功能。

    villainhr
  • 【每周NLP论文推荐】 对话管理中的标志性论文介绍

    欢迎来到《每周NLP论文推荐》。在这个专栏里,还是本着有三AI一贯的原则,专注于让大家能够系统性完成学习,所以我们推荐的文章也必定是同一主题的。

    用户1508658
  • Asp.net Ajax AutoComplete 控件的用法

    AutoComplete控件是微软提供的ASP.NET AJAX Control Toolkit 中的一个控件,是用来实现类似百度搜索的自动完成效果。

    thz
  • jquery 模态窗口 弹出窗 simpleModal

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/h...

    用户5760343

扫码关注云+社区

领取腾讯云代金券