Flutter中pop返回页面后，如何重新加载initState中的数据？

问题场景 #

我有两个Flutter页面：

• 第一个页面CourseList：从数据库获取课程数据并以列表形式展示
• 第二个页面：用于创建新课程并写入数据库

需求是：当从第二个页面通过Navigator.pop返回CourseList页面时，自动更新页面的课程列表数据。

原代码参考 #

CourseList页面原代码 #

class CourseList extends Stateful Widget {
  const CourseList({super.key});

  @override
  State<CourseList> createState() => _CourseListState();
}

class _CourseListState extends State<CourseList> {
  Future<List<Course>?> listCourses = Future.value([]);
  @override
  initState() {
    super.initState();
    Future.delayed(Duration.zero, () {
      setState(() {
        var course = CoursesData();
        listCourses = course.getCourses();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    var futureBuilder = FutureBuilder(
        future: listCourses,
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            return createScreen(context, snapshot);
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }
          return const Center(child: CircularProgressIndicator());
        });

    return futureBuilder;
  }

 Widget createScreen(BuildContext context, AsyncSnapshot snapshot) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context)
                      .pushNamed('/courseForm', arguments: null);
                },
                child: const Text("Adicionar Curso"))
          ],
        ),
        Expanded(
            child: ListView.builder(
          shrinkWrap: true,
          itemCount: snapshot.data.length,
          itemBuilder: ((context, index) {
            return CourseTile(snapshot.data[index]);
          }),
        ))
      ],
    );
  }
}

第二个页面保存按钮原代码 #

IconButton(
              onPressed: () {
                final isValid = _fomr.currentState!.validate();

                Navigator.pop(context, true);
                
              },
              icon: const Icon(Icons.save))

解决方案 #

核心思路是利用Navigator.pushNamed的返回值，在返回时触发列表数据的重新获取并更新状态。

步骤1：完善第二个页面的返回逻辑 #

在第二个页面的保存按钮点击事件中，先完成表单验证和数据库写入操作，再通过Navigator.pop返回标识，告知前一页需要更新数据：

IconButton(
  onPressed: () {
    final isValid = _fomr.currentState!.validate();
    if (isValid) {
      // 先执行写入数据库的逻辑（示例）
      // var courseData = CoursesData();
      // courseData.addCourse(新创建的课程对象);
      
      // 验证通过且写入完成后，返回true标识
      Navigator.pop(context, true);
    }
  },
  icon: const Icon(Icons.save))

步骤2：修改CourseList页面的跳转逻辑 #

将ElevatedButton的onPressed改为异步方法，通过await获取页面返回值，当返回有效标识时，重新获取数据并更新状态：

ElevatedButton(
  onPressed: () async {
    var result = await Navigator.of(context).pushNamed('/courseForm', arguments: null);

    if (result != null) {
      setState(() {
        // 重新从数据库获取最新课程列表
        var course = CoursesData();
        listCourses = course.getCourses();
      });
    }
    
  },
  child: const Text("Adicionar Curso"))

原理说明 #

• Navigator.pushNamed是异步方法，会在第二个页面调用Navigator.pop时返回传递的参数
• 当获取到返回的有效标识，调用setState触发页面重建，此时FutureBuilder会使用新的listCourses Future重新获取数据并渲染最新列表

内容的提问来源于stack exchange，提问作者Lucas Barreto Luz