Flutter滑动操作单元格插件flutter_swipe_action_cell的使用

描述

flutter_swipe_action_cell 是一个可以创建可滑动操作单元格的Flutter包，其效果类似于iOS原生。它允许用户通过滑动手势来触发一系列预定义的操作（如删除、编辑等），非常适合用于需要高效管理和交互的列表视图。

安装与配置

添加依赖

在项目的 pubspec.yaml 文件中添加以下内容以安装此插件：

dependencies:
  flutter_swipe_action_cell: ^3.1.5

然后执行 flutter pub get 来获取并安装该库。

导入库

在 Dart 文件顶部导入 flutter_swipe_action_cell 库：

import 'package:flutter_swipe_action_cell/flutter_swipe_action_cell.dart';

使用示例

以下是几个典型的使用场景及其对应的代码片段：

示例1：简单的删除操作

当用户向左滑动列表项时显示“删除”按钮，并且点击后会移除该项。

SwipeActionCell(
  key: ObjectKey(list[index]), // 必须提供唯一的key
  trailingActions: <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)),
  ),
);

示例2：全屏滑动即执行第一个动作

设置 performsFirstActionWithFullSwipe 属性为 true，这样用户完全滑动到末尾时就会立即触发第一个动作。

SwipeActionCell(
  key: ObjectKey(list[index]),
  trailingActions: <SwipeAction>[
    SwipeAction(
      performsFirstActionWithFullSwipe: true,
      title: "delete",
      onTap: (CompletionHandler handler) async {
        list.removeAt(index);
        setState(() {});
      },
      color: Colors.red,
    ),
  ],
  child: ... // 同上
);

示例3：带有动画效果的删除

等待动画完成后再更新数据源。

SwipeActionCell(
  key: ObjectKey(list[index]),
  trailingActions: <SwipeAction>[
    SwipeAction(
      title: "delete",
      onTap: (CompletionHandler handler) async {
        await handler(true); // 等待删除动画结束
        list.removeAt(index);
        setState(() {});
      },
      color: Colors.red,
    ),
  ],
  child: ... // 同上
);

示例4：多个操作选项

可以在同一个列表项上添加多个不同的操作按钮。

SwipeActionCell(
  key: ObjectKey(list[index]),
  trailingActions: <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 {
        handler(false);
        showCupertinoDialog(...);
      },
      color: Colors.orange,
    ),
  ],
  child: ... // 同上
);

更多功能

• 确认删除：模仿微信消息页面的删除确认逻辑。
• 编辑模式：类似iOS的多选编辑功能。
• 自定义形状：根据需求调整按钮样式。
• 路由切换自动关闭：确保在导航器改变路由时自动关闭所有打开的单元格。

完整示例

下面是一个完整的应用实例，展示了如何结合上述特性构建一个具有丰富交互体验的应用程序。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swipe_action_cell/flutter_swipe_action_cell.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [SwipeActionNavigatorObserver()], // 关闭打开的cell
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const HomePage(),
    );
  }
}

// 省略中间部分...

class _SwipeActionPageState extends State<SwipeActionPage> {
  List<Model> list = List.generate(30, (index) => Model()..index = index);
  late SwipeActionController controller;

  @override
  void initState() {
    super.initState();
    controller = SwipeActionController(selectedIndexPathsChangeCallback: (changedIndexPaths, selected, currentCount) {
      print('cell at ${changedIndexPaths.toString()} is/are ${selected ? 'selected' : 'unselected'}, current selected count is $currentCount');
      setState(() {});
    });
  }

  // 省略中间部分...

  Widget _item(BuildContext ctx, int index) {
    return SwipeActionCell(
      controller: controller,
      index: index,
      key: ValueKey(list[index]),
      trailingActions: [
        SwipeAction(
          title: "delete",
          performsFirstActionWithFullSwipe: true,
          nestedAction: SwipeNestedAction(title: "confirm"),
          onTap: (handler) async {
            await handler(true);
            list.removeAt(index);
            setState(() {});
          }),
        SwipeAction(title: "action2", color: Colors.grey, onTap: (handler) {}),
      ],
      leadingActions: [
        SwipeAction(
          title: "delete",
          onTap: (handler) async {
            await handler(true);
            list.removeAt(index);
            setState(() {});
          }),
        SwipeAction(title: "action3", color: Colors.orange, onTap: (handler) {}),
      ],
      child: GestureDetector(
        onTap: () {
          Navigator.push(context, CupertinoPageRoute(builder: (ctx) => const HomePage()));
        },
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Text("This is index of ${list[index]}", style: const TextStyle(fontSize: 30)),
        ),
      ),
    );
  }
}

以上就是关于 flutter_swipe_action_cell 的详细介绍和使用方法。希望这些信息能够帮助您更好地理解和应用这个强大的Flutter组件！如果您有任何问题或需要进一步的帮助，请随时提问。