Flutter中Inkwell的onTap仅Navigator生效，异步更新函数未执行的解决方法

问题原因 #

你当前的代码里，updateStatus是异步函数，但调用时没有用await等待它执行完成，紧接着就触发了Navigator.push导航操作。导航会立刻切换页面，当前的_NotificationListState可能被销毁，导致未完成的异步HTTP请求被中断，所以看起来updateStatus没有执行。

可行解决方案 #

方案1：等待状态更新完成后再导航 #

在onTap回调里，用await等待updateStatus执行完毕，再进行导航，同时添加错误处理避免异常影响流程：

onTap: () async {
  try {
    // 等待状态更新接口调用完成
    await updateStatus(list![index]['id']);
    print(list[index]['id']);
    
    // 更新完成后再执行导航
    if (list[index]['title'] == "Interest Request") {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const InterestRequestList())
      );
    }
  } catch (e) {
    // 处理更新失败的情况，比如给用户提示
    print('通知状态更新失败：$e');
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('通知状态更新失败，请重试'))
    );
  }
}

方案2：用then处理异步完成后的导航 #

如果偏好链式调用风格，可以通过then指定异步操作完成后的导航逻辑：

onTap: () {
  updateStatus(list![index]['id'])
    .then((_) {
      print(list[index]['id']);
      if (list[index]['title'] == "Interest Request") {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const InterestRequestList())
        );
      }
    })
    .catchError((e) {
      print('通知状态更新失败：$e');
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('通知状态更新失败，请重试'))
      );
    });
}

额外优化建议 #

如果需要更新状态后立刻刷新通知列表的已读显示，可以在updateStatus执行完成后，触发列表刷新：

await updateStatus(list![index]['id']);
// 重新获取通知数据并刷新UI
setState(() {});

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