Flutter_学习记录_showDialog/showModalBottomSheet setState 无法更新UI问题

一人前行

于 2025-03-02 22:44:21 发布

阅读量51

点赞数

分类专栏： flutter学习文章标签： flutter

原文链接：https://www.cnblogs.com/r1cardo/p/15510756.html

版权

flutter学习专栏收录该内容

33 篇文章

订阅专栏

前言

今天写Demo时，用showModalBottomSheet，添加点击事件调用setState()方法后，UI依然不更新，百度了一下，从这两个文章找到了对应的解决方案：
Flutter showDialog/showModalBottomSheet刷新UI
showModalBottomSheet setState 无法更新UI问题

解决方案

解决方案用：StatefulBuilder 包裹一下方可。代码如下：

showModalBottomSheet(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(25), topRight: Radius.circular(25))),
        context: context,
        builder: (_) {
          return StatefulBuilder(builder: (context, state) {
            return InkWell(
                onTap: () {
                  state(() {
                    ///update your UI
                  });
                },
                child: Container());
          });
        });

代码讲解

StatefulBuilder(builder: (context, state) 如果有需要UI更新的，需要先用StatefulBuilder包裹一下
当需要更新时，调用state(() { ///update your UI }); 代替setState（）的方法

原理

首先理解showModalBottomSheet，本质上可以理解为路由入栈，在show之后弹出的页面其实是另一个页面了，此时再setState刷新的其实是原页面的状态，所以在此方法的builder方法中先返回一个StatefulBuilder，设置其setState方法为state，此时再调用此方法便可做到刷新状态。