ios 侧滑返回传值卡死_flutter列表项侧滑库flutter_swipe_action_cell

flutter_swipe_action_cell

一个可以提供iOS原生效果的列表侧滑库 flutter_swipe_action_cell

Example 1:最简单的例子---删除

Tip：你把下面的放在你ListView的itemBuilder里面返回就行

SwipeActionCell(
      ///这个key是必要的
      key: ObjectKey(list[index]),
      actions: <SwipeAction>[
        SwipeAction(
            title: "delete",
            onTap: (CompletionHandler handler) async {
              list.removeAt(index);
              setState(() {});
            },
            color: Colors.red),
      ],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text("this is index of ${list[index]}",
            style: TextStyle(fontSize: 40)),
      ),
    );

Example 2:拉满将会执行第一个action

SwipeActionCell(
       ///这个key需要
      key: ObjectKey(list[index]),

      ///参数名和iOS原生相同
      performsFirstActionWithFullSwipe: true,
      actions: <SwipeAction>[
        SwipeAction(
            title: "delete",
            onTap: (CompletionHandler handler) async {
              list.removeAt(index);
              setState(() {});
            },
            color: Colors.red),
      ],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text("this is index of ${list[index]}",
            style: TextStyle(fontSize: 40)),
      ),
    );

Example 3:伴随动画的删除（按照iOS原生动画做的）

SwipeActionCell(
     ///这个key是必要的
     key: ObjectKey(list[index]),
     performsFirstActionWithFullSwipe: true,
     actions: <SwipeAction>[
       SwipeAction(
           title: "delete",
           onTap: (CompletionHandler handler) async {
             
             /// await handler(true) : 代表将会删除这一行
            ///在删除动画结束后，setState函数才应该被调用来同步你的数据和UI

             await handler(true);
             list.removeAt(index);
             setState(() {});
           },
           color: Colors.red),
     ],
     child: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Text("this is index of ${list[index]}",
           style: TextStyle(fontSize: 40)),
     ),
   );

Example 4:多于一个action

SwipeActionCell(
     ///这个key是必要的
     key: ObjectKey(list[index]),

     ///这个参数名以及其含义和iOS 原生的相同
     performsFirstActionWithFullSwipe: true,
     actions: <SwipeAction>[
       SwipeAction(
           title: "delete",
           onTap: (CompletionHandler handler) async {
             await handler(true);
             list.removeAt(index);
             setState(() {});
           },
           color: Colors.red),

       SwipeAction(
           widthSpace: 120,
           title: "popAlert",
           onTap: (CompletionHandler handler) async {
             ///false 代表他不会删除这一行，默认情况下会关闭这个action button
             handler(false);
             showCupertinoDialog(
                 context: context,
                 builder: (c) {
                   return CupertinoAlertDialog(
                     title: Text('ok'),
                     actions: <Widget>[
                       CupertinoDialogAction(
                         child: Text('confirm'),
                         isDestructiveAction: true,
                         onPressed: () {
                           Navigator.pop(context);
                         },
                       ),
                     ],
                   );
                 });
           },
           color: Colors.orange),
     ],
     child: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Text(
           "this is index of ${list[index]}",
           style: TextStyle(fontSize: 40)),
     ),
   );

Example 5：仿微信iOS端确认删除效果

return SwipeActionCell(
      ///this key is necessary
      key: ValueKey(list[index]),
      actions: <SwipeAction>[
        SwipeAction(
          ///这个参数只能给的第一个action设置哦
          nestedAction: SwipeNestedAction(title: "确认删除"),
          title: "删除",
          onTap: (CompletionHandler handler) async {
            await handler(true);
            list.removeAt(index);
            setState(() {});
          },
          color: Colors.red,
        ),
        SwipeAction(
            title: "置顶",
            onTap: (CompletionHandler handler) async {
              handler(false);
            },
            color: Colors.grey),
      ],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text("this is index of ${list[index]}",
            style: TextStyle(fontSize: 40)),
      ),
    );

Example 6：仿美团iOS端订单页删除效果

根据gif图可以判断，删除逻辑应该是这样的：

• 1.点击或者拉动到最后触发删除动作
• 2.关闭cell的按钮
• 3.请求服务器删除，服务器返回删除成功
• 4.触发删除动画，更新UI

那么对应的例子如下：

Widget _item(int index) {
    return SwipeActionCell(
      ///this key is necessary
      key: ObjectKey(list[index]),

      ///this name is the same as iOS native
      performsFirstActionWithFullSwipe: true,
      actions: <SwipeAction>[
        SwipeAction(
            icon: Icon(Icons.add),
            title: "delete",
            onTap: (CompletionHandler handler) async {
              ///先关闭cell
              await handler(false);

              ///利用延时模拟请求网络的过程
              await Future.delayed(Duration(seconds: 1));

              ///准备执行删除动画，更新UI
              ///可以把handler当做参数传到其他地方去调用
              _remove(index, handler);
            },
            color: Colors.red),
      ],
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text("this the index of ${list[index]}",
            style: TextStyle(fontSize: 40)),
      ),
    );
  }

  void _remove(int index, CompletionHandler handler) async {
    ///在这里删除，删除后更新UI
    await handler(true);
    list.removeAt(index);
    setState(() {});
  }

关于 CompletionHandler

它代表你在点击action之后如何操纵这个cell，如果你不想要任何动画，那么就不执行handler，而是直接更新你的数据，然后setState就行

如果你想要动画:

• hander(true) :代表这一行将会被删除（虽然UI上看不到那一行了，但是你仍然应该更新你的数据并且setState)
• await handler(true) :代表你将会等待删除动画执行完毕，你应该在这一行之后去执行setState，否则看不到动画（适合同步删除，也就是删除这个cell在业务上不需要服务器的参与）
• handler(false) : 点击后内部不会有删除这一行的动作，默认地，他只会关闭这个action button means it will not delete this row.By default,it just close this cell's action buttons.
• await handler(false) : 相比上面来说，他只会等待关闭动画结束。