flutter中如何优雅的根据数据刷新页面？

Question

这样一种比较常见的场景：

有个列表ListView，列表的数据是List<PersonModel>，列表中的一个cell对应一条个人信息，点击cell，进入个人信息详情页。详情页的信息可以编辑，编辑后，列表中对应的信息也应该刷新。cell和详情页的数据来自同一个PersonModel。

目前的处理方式是，详情页编辑后，返回到列表页的时候执行 setState 刷新列表：

pushDetailPage(person).then(){ setState() }

除此之外还有哪些更好的写法？能否做到不每次返回列表都调用setState?

Answer 1

chatGPT ai回答
如果你想避免每次返回列表页都调用 setState() 来刷新列表，你可以使用一些替代方法。

一种可能的方法是在详情页中编辑数据后，使用一个函数来更新列表中的数据，而不是调用 setState()。例如：

// In the detail page:

function updatePerson(newPerson) {
  let personIndex = personList.findIndex(person => person.id === newPerson.id);
  personList[personIndex] = newPerson;
  // 您可以使用此函数更新列表页面中的列表，而不是使用 setState()
}

//完成编辑后，调用updatePerson函数更新列表： 
updatePerson(newPerson);

// 然后导航回列表页
pushListPage();

还有，你可以使用一些状态管理库来管理数据流，例如 Redux、MobX 或 Flux。这些库可以让你在任何地方更新数据，并自动刷新相关组件。

例如，你可以在详情页中使用 Redux 来更新数据，然后自动刷新列表页。这样，你就不需要在返回列表页的时候调用 setState() 了。

不过，使用状态管理库可能会增加代码的复杂度，因此需要根据你的项目的具体情况来决定是否使用。

Answer 2

是数据从子传到父的情况，可以用 ValueListenableBuilder

Answer 3

使用Navigator跳转的时候除了传PersonModel参数外再多加一个Function参数,当在后面详情页编辑后调用这个Function更新参数

home_page.dart

Navigator.push(ctx,MaterialPageRoute(builder: (BuildContext context) {
             return DetailPage(personModel:PersonModel() updateAction: () {
                      setState(() {});
             });
});

detail_page.dart

//方式 - 
//需要先创建一个InheritedWidget父组件, 子组件可以通过该InheritedWidget访问 updateAction
class DetailPage extends StatelessWidget {
  final Function updateAction;
  final PersonModel personModel;
  const DetailPage({super.key,required this.personModel,required this.updateAction});

  Widget build(BuildContext context) {
   //以下内容省略
  }
}

//方式 二
//子组件可以通过全局的updateAct更新数据
dynamic updateAct;
class DetailPage extends StatelessWidget {
  final PersonModel personModel;
  DetailPage({super.key, required this.personModel,required updateAction}){
    updateAct = updateAction;
  }

  Widget build(BuildContext context) {
   //以下内容省略
  }
  
}