前言
本篇介绍如何使用 Dio 提供的 delete 方法对接后台的删除接口。调试前需要启动后台工程，参考上一篇文章，运行后台应用（同时应准备好后台数据库数据）。
界面交互
我们需要实现长按弹出列表元素来进行删除操作，界面实现不是本篇的重点，上 pub 找了一个 FocusedMenu 来实现。FocusedMenu 实现比较简单，我们只需要将列表元素使用 FocusedMenuHolder 包裹起来即可：
// dynamic_item.dart
@overrideWidget build(BuildContext context) { return FocusedMenuHolder( child: Container( // 省略原列表元素构建代码 ), onPressed: () { // 点击事件 _handlePressed(context); }, // 长按菜单 menuItems: <FocusedMenuItem>[ FocusedMenuItem( title: Text("查看详情"), trailingIcon: Icon(Icons.remove_red_eye_outlined), onPressed: () { _handlePressed(context); }), FocusedMenuItem( title: Text("取消"), trailingIcon: Icon(Icons.cancel), onPressed: () {}, ), FocusedMenuItem( title: Text( "删除", style: TextStyle(color: Colors.redAccent), ), trailingIcon: Icon( Icons.delete, color: Colors.redAccent, ), onPressed: () { handleDelete(dynamicEntity.id); }), ], );}
复制代码
关键是长按菜单的配置，配置对应的菜单名称、图标、响应事件即可。这里的 handleDelete 方法从列表页面传递过来，接收一个列表元素的 id，以便在列表页面处理删除的逻辑。
网络请求删除实现
在dynamic_service.dart 中增加一个删除方法，用于网络请求删除，如下所示：
static Future delete(String id) async { var result = await Dio().delete( host + 'dynamics/' + id, );
return result;}
复制代码
方法很简单，只需要调用 Dio 实例的删除方法，将需要删除的 id 拼接上 url 地址即可。
对应的调用的业务代码如下，当点击弹出菜单的删除按钮时调用该方法。该方法如果删除成功（状态码 200），则从当前列表中移除该元素，并刷新状态更新界面；如果失败（状态码为其他），则通过 SnackBar 显示错误信息。
void _onItemDelete(String id) async { try { var response = await DynamicService.delete(id); if (response.statusCode == 200) { setState(() { _listItems.removeWhere((element) => element.id == id); }); } else { _showErrorInfo(this.context, response.statusMessage); } } on DioError catch (e) { _showErrorInfo(this.context, e.message); } catch (e) { _showErrorInfo(this.context, e.toString()); } }
复制代码
这里首先是使用了一个 try...catch 包裹了网络请求，这是因为后台可能发生异常，例如数据已经被删除了，后台存在 bug 等等。目前我们还没有做统一对 Dio 的异常进行处理，因此为了防止后台异常导致应用崩溃有必要做异常捕获。实际可以传一个虚拟的 id 验证异常，会发现 Dio 会抛出一个 DioError 错误出来，这里我们可以向用户提示错误信息。
顺带讲一下 Dart 的异常捕获形式，可以看到有个on关键字，这里可以使用多个 on 来匹配不同的异常。形式如下，其中catch的第二个参数是堆栈信息。
try { // ...} on ExceptionType1 catch (e) { // ExceptionType1异常处理} on ExceptionType2 catch (e) { // ExceptionType2异常处理} catch (e,s) { // 其他异常处理}
复制代码
运行效果
运行效果如下图（第二张为捕获异常的情况）：
源码
源码地址：https://gitee.com/island-coder/flutter-beginner/tree/master/network
评论