在 Flutter 中删除操作后更新列表项答案

【问题标题】：Update List Item After Delete Action in Flutter在 Flutter 中删除操作后更新列表项
【发布时间】：2021-07-26 05:29:09
【问题描述】：

您好，我是 Flutter 新手，在执行从数据库中删除项目后更新列表时遇到问题。有人说要使用 setState，但我仍然不知道如何在我的代码中实现它。尝试在删除操作后立即调用 seState，但仍然没有任何反应。在 Flutter 中理解要更新哪个组件仍然有些麻烦。谢谢。

class ProfileView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ProfileViewState();
  }
}

class _ProfileViewState extends State<ProfileView> {
  late Future<List<Patient>> _patients;
  late PatientService patientService;


  @override
  void initState() {
    super.initState();
    patientService = PatientService();
    _patients = patientService.getPatient();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Profile')),
        body: Column(
          children: <Widget>[
              Flexible(
                child: SizedBox(
                  child: FutureBuilder<List<Patient>>(
                    future: _patients,
                    builder: (BuildContext context, AsyncSnapshot snapshot) {
                      if(snapshot.hasError) {
                        print(snapshot);
                        return Center(
                          child: Text("Error"),
                        );
                      } else if (snapshot.hasData){
                          List<Patient> patients = snapshot.data;
                          return _buildListView(patients);
                      } else {
                        return Center(
                          child: Container(),
                        );
                      }
                    },
                  ),
                ),
              )
          ],
    ),
    );
  }

  Widget _buildListView(List<Patient> patients) {

    return ListView.separated(
        separatorBuilder: (BuildContext context, int i) => Divider(color: Colors.grey[400]),
        itemCount: patients.length,
        itemBuilder: (context, index) {
          Patient patient = patients[index];
          return Row(
            children: <Widget>[
              Flexible(
                  child: SizedBox(
                    child: ListTile(
                      title: Text(patient.firstName),
                      subtitle: Text(patient.phone),
                      trailing: IconButton(
                        icon: new Icon(const IconData(0xf4c4, fontFamily: 'Roboto'), size: 48.0, color: Colors.red), 
                        onPressed: () {
                          patientService.deletePatient(patient.id.toString());
                        }),
                    ),
                  )
              )
            ],
          );
        }
    );
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

您可以通过从initState 中删除未来的初始化并将patientService.getPatient() 的未来提供给FutureBuilder 来实现，如下所示：

future: patientService.getPatient()

并在确保成功删除患者后调用 setState。

这样做的原因是当您从数据库中删除您的患者时，是的，它已从数据库中删除，但用户界面在删除后没有获得有关患者列表的更新。在您的情况下调用 setState 不会进行更改的原因是因为您在 initState 中分配了未来，它在小部件初始化时被调用一次且仅调用一次。因此，当您调用 setState 时，将不会再次调用未来，因此不会获取新数据。

所以我所做的只是从initState 中删除未来的初始化并将其交给FutureBuilder，每当您调用setState 时都会重建它。

即使这样可行，它也不是理想的解决方案。因为每次删除时您都在重建整个小部件，考虑到 FutureBuilder，这有点繁重，所以我建议检查一些状态管理解决方案，如 Bloc 或 Mobx 甚至 Provider 包（这不是状态管理根据其创建者的说法）。

希望清楚！

编码愉快！

【讨论】：

【解决方案2】：

在 onPressed 方法中调用 setState()。

onPressed: () {
    patientService.deletePatient(patient.id.toString());
    setState((){});
}),

如果您没有保存要从中删除项目的列表的本地副本，那么这可行

虽然如果 delete 方法从您获取项目的任何位置删除，那么您将需要调用

_patients = patientService.getPatient();

在调用 setState() 之前

【讨论】：

你需要在方法调用_patients = await patientService.getPatient();之前添加一个等待

【解决方案3】：

我认为您的 deletePatient 是异步方法。并且您在没有等待的情况下调用此方法，并且在调用此函数 setState 之后，因此小部件在删除完成之前得到更新。如果 deletePatient 是异步的，则在调用它之前添加 await 并在它之后添加 setState。

onPressed: () async {
    await patientService.deletePatient(patient.id.toString());
    setState((){});
})

【讨论】：