Flutter 弹框数据更新

原创已于 2023-05-24 11:59:49 修改 · 771 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2023-03-13 18:03:16 首次发布

Flutter 专栏收录该内容

6 篇文章

订阅专栏

在Flutter开发中，当封装弹框组件后，发现修改的数据无法触发页面重新渲染。原因是弹框被视为新页面，setState只更新前一个页面。解决方案是使用StatefulBuilder，确保弹框内容随数据变化而更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、提出的问题

我封装一个弹框组件之后发现修改了数据，但是页面并没有重新渲染。

二、问题的原因

在flutter中弹框其实是一个新的页面，所以调用setState时，其实重新渲染的是弹框前的页面，弹框本身的页面并不会进行重新渲染，需要调用弹框中的setState才行。

三、解决问题

使用StatefulBuilder包裹要展示的内容，代码如下：

  Future<bool?> dialog(BuildContext context, List list) async {
    return showModalBottomSheet<bool>(
      context: context,
      builder: (BuildContext context) => StatefulBuilder(
        builder: (context, setState) => Container(
          child: Flex(
            direction: Axis.vertical,
            children: [
              ......
            ],
          ),
        ),
      ),
    );
  }