Flutter滑动操作插件flutter_slidable_plus_plus的使用

Flutter滑动操作插件flutter_slidable_plus_plus的使用

简介

flutter_slidable_plus_plus 是一个基于 flutter_slidable 的 Fork 项目，它实现了可滑动的列表项，并提供了方向滑动手势和可删除的功能。此插件允许用户在滑动时显示自定义的操作按钮，并且支持多种动画效果。

功能特性

• 支持左/右（或上/下）滑动手势。
• 可以通过滑动删除列表项。
• 提供了4种内置的滑动手势动画。
• 提供了2种内置的滑动操作组件。
• 内置了一个删除动画。
• 支持自定义布局和动画。
• 支持通过构建器创建滑动操作，以便在动画过程中实现特殊效果。
• 滑动操作点击后默认关闭滑动手势（可覆盖）。
• 当最近的 Scrollable 组件开始滚动时，默认关闭滑动手势（可覆盖）。
• 可以轻松禁用滑动效果。
• 支持自定义图标。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_slidable_plus_plus: <latest_version>

然后在 Dart 文件中导入该库：

import 'package:flutter_slidable_plus_plus/flutter_slidable_plus_plus.dart';

使用示例

下面是一个完整的示例代码，展示了如何使用 flutter_slidable_plus_plus 插件来创建一个带有滑动操作的列表项。这个示例包括了左右两侧的滑动手势，并且每个滑动手势都包含两个操作按钮。

import 'package:flutter/material.dart';
import 'package:flutter_slidable_plus_plus/flutter_slidable_plus_plus.dart';

void main() => runApp(const MyApp());

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late final controller = SlidableController(this);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Slidable Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Slidable Example'),
        ),
        body: ListView.builder(
          itemCount: 10, // 假设有10个列表项
          itemBuilder: (context, index) {
            return Slidable(
              // 指定一个 key，如果 Slidable 是可删除的
              key: ValueKey(index),

              // 左侧滑动手势
              startActionPane: ActionPane(
                // 控制滑动手势的动画效果
                motion: const ScrollMotion(),

                // 允许通过滑动删除 Slidable
                dismissible: DismissiblePane(onDismissed: () {
                  // 处理删除逻辑
                  setState(() {
                    // 这里可以移除列表项
                  });
                }),

                // 定义左侧滑动操作
                children: [
                  SlidableAction(
                    onPressed: (_) => print('Delete pressed'),
                    backgroundColor: const Color(0xFFFE4A49),
                    foregroundColor: Colors.white,
                    icon: Icons.delete,
                    label: 'Delete',
                  ),
                  SlidableAction(
                    onPressed: (_) => print('Share pressed'),
                    backgroundColor: const Color(0xFF21B7CA),
                    foregroundColor: Colors.white,
                    icon: Icons.share,
                    label: 'Share',
                  ),
                ],
              ),

              // 右侧滑动手势
              endActionPane: ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    // 可以设置更大的比例
                    flex: 2,
                    onPressed: (_) => print('Archive pressed'),
                    backgroundColor: const Color(0xFF7BC043),
                    foregroundColor: Colors.white,
                    icon: Icons.archive,
                    label: 'Archive',
                  ),
                  SlidableAction(
                    onPressed: (_) => print('Save pressed'),
                    backgroundColor: const Color(0xFF0392CF),
                    foregroundColor: Colors.white,
                    icon: Icons.save,
                    label: 'Save',
                  ),
                ],
              ),

              // 当不拖动时显示的内容
              child: ListTile(
                title: Text('Item $index'),
                subtitle: const Text('Slide me to reveal actions'),
              ),
            );
          },
        ),
      ),
    );
  }
}

动画效果

flutter_slidable_plus_plus 提供了四种不同的滑动手势动画效果：

1. Behind Motion：动作按钮出现在 Slidable 后面，随着滑动逐渐显示出来。

2. Drawer Motion：动作按钮像抽屉一样从侧面滑出。

3. Scroll Motion：动作按钮跟随 Slidable 一起滑动。

4. Stretch Motion：动作按钮在滑动时被拉伸。

控制器

你可以使用 SlidableController 来编程方式打开或关闭滑动手势。例如：

final controller = SlidableController();

// 打开右侧滑动手势
controller.openEndActionPane();

// 打开左侧滑动手势
controller.openStartActionPane();

// 关闭所有滑动手势
controller.close();