Flutter跨页面添加数据后setState仅再次操作时才触发页面重建问题

你的代码存在两个核心错误导致列表无法及时刷新：

• 传递给AddWorkout页面的回调仅执行了列表添加操作，未调用setState()通知Flutter状态变更，UI不会自动重绘
• 你写在Navigator.push后的setState()执行时机完全错误：跳转新页面前就会执行，此时新增条目操作还未发生，无法刷新到新增后的内容

你观察到的「下次点添加按钮才显示新条目」，本质是下次点击按钮时执行的setState()才把之前修改过的列表内容渲染到UI上。

推荐两种可行实现方案，二选一即可：

方案1：修改回调函数，添加时直接触发状态刷新 #

仅需修改WorkoutList页面的浮动按钮点击逻辑：

1. 给新增条目的回调包裹setState()
2. 删除Navigator.push后无用的setState()调用

修改后的代码：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => AddWorkout(
          // 回调中添加setState触发UI刷新
          workout: (workout) {
            setState(() {
              workouts.add(workout);
            });
          },
        )
      )
    );
    // 原来这里的setState属于无用代码，直接删除即可
  },
  tooltip: 'Add',
  child: Icon(Icons.add),
),

方案2：等待页面返回后刷新（适合跨页面传值场景） #

利用Navigator.push返回的Future，等待AddWorkout页面关闭后统一处理逻辑：

第一步：修改WorkoutList的跳转逻辑 #

floatingActionButton: FloatingActionButton(
  onPressed: () async {
    // 等待AddWorkout页面返回的结果
    final Workout? newWorkout = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const AddWorkout())
    );
    // 返回非空说明用户确认添加
    if (newWorkout != null) {
      setState(() {
        workouts.add(newWorkout);
      });
    }
  },
  tooltip: 'Add',
  child: Icon(Icons.add),
),

第二步：修改AddWorkout的提交逻辑 #

void _addWorkout() {
  // 直接把新建的Workout作为返回值传给上一页
  Navigator.pop(context, Workout(name: 'down'));
}

同时可以删除AddWorkout类中接收回调的相关定义代码。

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