微信iOS端有一个点击删除后—->确认删除，再次点击后才删除的效果

原效果如下：
用flutter快速实现微信iOS端消息列表项侧滑删除效果 - 图1
微信点击二次确认删除交互
那么在flutter中如何实现这样的交互效果呢？

1.首先使用pub工具导入flutter_swipe___action_cell，我们将使用这个包来做这样的效果
2.然后我们创建数据源，数据我们就使用一个从0-100的数字组成的List来作为数据源

  1. List list = List.generate(100, (index) {
  2.     return index;
  3. });

3.在页面中返回一个ListView，将列表项作为函数，函数签名为 _item(int index)

  1. return Scaffold(
  2.       appBar: AppBar(
  3.         title: Text(widget.title),
  4.       ),
  5.       body: ListView.builder(
  6.         itemBuilder: (c, index) {
  7.           return _item(index);
  8.         },
  9.         itemCount: list.length,
  10.       ),
  11.     );

4.在_item(int index)中，我们返回如下的布局

  1. Widget _item(int index) {
  2.     return SwipeActionCell(
  3.       ///这个key是必要的
  4.       key: ValueKey(list[index]),
  5.       actions: <SwipeAction>[
  6.         SwipeAction(
  7.             nestedAction: SwipeNestedAction(
  8.               title: "确认删除",
  9.             ),
  10.             title: "删除",
  11.             onTap: (CompletionHandler handler) async {
  12.               ///true 代表将会执行动画，等待动画结束才更新状态
  13.               await handler(true);
  14.               list.removeAt(index);
  15.               setState(() {});
  16.             },
  17.             color: Colors.red),
  18.         SwipeAction(
  19.             title: "置顶",
  20.             onTap: (CompletionHandler handler) async {
  21.               handler(false);
  22.             },
  23.             color: Colors.grey),
  24.       ],
  25.       child: Padding(
  26.         padding: const EdgeInsets.all(20.0),
  27.         child: Text("this is index of ${list[index]}",
  28.             style: TextStyle(fontSize: 45)),
  29.       ),
  30.     );
  31.   }

然后我们就可以得到如下的效果了：
用flutter快速实现微信iOS端消息列表项侧滑删除效果 - 图2基本上能够完全还原了，当然，这个删除的时候还有一个折叠动画，这个动画是可以取消的，把中间那句

  1. await handler(true);

删掉就可以取消动画了，还是非常简单的就实现了这个效果。

转载自https://zhuanlan.zhihu.com/p/174798368