为什么调用setState后StatefulWidget未更新？弹窗内ListView如何实时刷新

问题原因 #

• 该问题和你直接在floatingActionButton属性中调用OriginFloatingActionButton()无关，核心原因是showDialog构建的弹窗是挂载在全局Navigator路由栈上，不属于OriginFloatingActionButton的组件子树。你当前调用的setState只会触发OriginFloatingActionButton自身重绘，不会刷新已经弹出的独立弹窗组件，所以列表只会在弹窗关闭重开时读取最新的strings列表渲染。

解决方案 #

方案1：使用StatefulBuilder局部刷新弹窗（最简单快速） #

StatefulBuilder是Flutter专门提供的用于在弹窗、底部弹窗等独立上下文组件中实现局部刷新的组件，你只需要用它包裹你的Dialog内容，调用它提供的setState方法即可刷新弹窗内部UI。

修改OriginFloatingActionButton中showDialog部分的代码即可：

onPressed: () {
  showDialog(
      context: context,
      builder: (BuildContext context) {
        // 新增StatefulBuilder包裹Dialog
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter dialogSetState) {
            return Dialog(
                elevation: 16,
                child: Container(
                  height: 700,
                  width: 500,
                  child: Center(
                    child: Column(
                      children: <Widget>[
                        Center(
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              SizedBox(
                                  width: 300,
                                  child: Expanded(
                                      child: ListView.builder(
                                          shrinkWrap: true,
                                          itemCount: strings.length,
                                          itemBuilder: (BuildContext context, int index) {
                                            return TextField(
                                              decoration: InputDecoration(
                                                  label: Text(
                                                      "Artist Name " + index.toString()),
                                                  border: const OutlineInputBorder()),
                                            );
                                          }))),
                              const SizedBox(width: 5,),
                              ElevatedButton(
                                child: const Icon(Icons.add),
                                style: ElevatedButton.styleFrom(
                                    primary: Colors.white,
                                    onPrimary: Colors.black,
                                    shape: const CircleBorder(
                                        side: BorderSide(
                                            color: Colors.black,
                                            width: 1,
                                            style: BorderStyle.solid))),
                                onPressed: () {
                                  // 调用StatefulBuilder提供的dialogSetState刷新弹窗
                                  dialogSetState(() {
                                    strings.add("ABC");
                                  });
                                },
                              ),
                              // 剩余原有代码保持不变
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ));
          },
        );
      });
}

方案2：弹窗内容封装为独立StatefulWidget #

如果你的弹窗逻辑比较复杂，建议把整个Dialog的内容抽成单独的StatefulWidget，将strings列表作为参数传入，内部点击添加时调用自身的setState即可直接刷新列表，这种方式代码可维护性和复用性更高。

内容的提问来源于stack exchange，提问作者Beginner_