前言

本篇介绍如何使用 Dio 提供的 delete 方法对接后台的删除接口。调试前需要启动后台工程，参考上一篇文章，运行后台应用（同时应准备好后台数据库数据）。

界面交互

我们需要实现长按弹出列表元素来进行删除操作，界面实现不是本篇的重点，上 pub 找了一个 FocusedMenu 来实现。FocusedMenu 实现比较简单，我们只需要将列表元素使用 FocusedMenuHolder 包裹起来即可：

// dynamic_item.dart

@override
Widget 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) {
  // 其他异常处理
}