Flutter showDialog以及showModalBottomSheet setState() 未改变

最新推荐文章于 2025-03-02 22:44:21 发布

Dashingl

最新推荐文章于 2025-03-02 22:44:21 发布

阅读量1.1k

点赞数 1

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/qq_28641023/article/details/118418486

版权

Flutter 专栏收录该内容

14 篇文章

订阅专栏

我在使用 showDialog 或者 showModalBottomSheet 的时候，都会遇到这个问题：通过 setState 方法无法更新当前的UI。

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

解决方法：StatefulBuilder 包裹即可

  buildWidget(BuildContext context) {
    int index = 0;
    return showModalBottomSheet(
        context: context,
        builder: (context) => StatefulBuilder( // 嵌套一个StatefulBuilder 部件
            builder: (context, setState) => BottomSheet(
                  builder: (BuildContext context) {
                    return Container(
                        color: Colors.white,
                        height: 50,
                        child: RaisedButton(
                            color: Color(0xff56C0C1),
                            textColor: Colors.white,
                            child: Text(index.toString()), 
                            onPressed: () {
                              // 更新状态 
                              setState((){
                                index++;
                              });
                            }));
                  },
                  onClosing: () {},
                )));
  }