Pub BuyMeACoffee

Slidable 是一个 Flutter Favorite 包！

flutter_slidable

一个 Flutter 实现的带有方向滑动操作的可滑动列表项，可以被Dismiss。

赞助商

我们的顶级赞助商如下！[成为赞助商]


尝试 Flutter 聊天教程  ？

从 0.6.0 迁移

您可以阅读这篇简短的指南，从 0.6 版本迁移到 1.0 版本：https://github.com/letsar/flutter_slidable/wiki/Migration-from-version-0.6.0-to-version-1.0.0

特点

  • 接受开始（左/上）和结束（右/下）动作面板。
  • 可以被忽略。
  • 4 个内置动作面板。
  • 2 个内置滑动动作小部件。
  • 1 个内置忽略动画。
  • 您可以轻松创建自定义布局和动画。
  • 如果您想在动画期间获得特殊效果，可以使用构建器来创建您的滑动动作。
  • 滑动动作被点击时关闭（可覆盖）。
  • 当最近的 Scrollable 开始滚动时关闭（可覆盖）。
  • 易于禁用滑动效果的选项。

安装

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  flutter_slidable: <latest_version>

在您的库中添加以下导入

import 'package:flutter_slidable/flutter_slidable.dart';

入门

示例

Slidable(
  // Specify a key if the Slidable is dismissible.
  key: const ValueKey(0),

  // The start action pane is the one at the left or the top side.
  startActionPane: ActionPane(
    // A motion is a widget used to control how the pane animates.
    motion: const ScrollMotion(),

    // A pane can dismiss the Slidable.
    dismissible: DismissiblePane(onDismissed: () {}),

    // All actions are defined in the children parameter.
    children: const [
      // A SlidableAction can have an icon and/or a label.
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFFFE4A49),
        foregroundColor: Colors.white,
        icon: Icons.delete,
        label: 'Delete',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF21B7CA),
        foregroundColor: Colors.white,
        icon: Icons.share,
        label: 'Share',
      ),
    ],
  ),

  // The end action pane is the one at the right or the bottom side.
  endActionPane: const ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        // An action can be bigger than the others.
        flex: 2,
        onPressed: doNothing,
        backgroundColor: Color(0xFF7BC043),
        foregroundColor: Colors.white,
        icon: Icons.archive,
        label: 'Archive',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF0392CF),
        foregroundColor: Colors.white,
        icon: Icons.save,
        label: 'Save',
      ),
    ],
  ),

  // The child of the Slidable is what the user sees when the
  // component is not dragged.
  child: const ListTile(title: Text('Slide me')),
),

动画

任何 ActionPane 都有一个 motion 参数，允许您定义当用户拖动 Slidable 时面板如何设置动画。

后台动画

动作显示得好像它们在 Slidable 的后面。

Behind Motion

抽屉动画

当 Slidable 移动时，将动作动画化，就像它们是抽屉一样。

Drawer Motion

滚动动画

当 Slidable 移动时，动作会跟随它。

Scroll Motion

拉伸动画

当 Slidable 移动时，将动作动画化，就像它们被拉伸一样。

Stretch Motion

常见问题

您可以在这里阅读常见问题解答：https://github.com/letsar/flutter_slidable/wiki/FAQ

赞助

我在业余时间维护我的包，但我的时间并不充裕。如果此包或我创建的任何其他包对您有帮助，请考虑赞助我，这样我就可以花时间阅读问题、修复错误、合并拉取请求并为这些包添加功能。

贡献

欢迎您为本项目做出贡献。

如果您发现错误或想要某个功能，但不知道如何修复/实现它，请提交一个问题。
如果您修复了错误或实现了某个功能，请发送一个拉取请求。

GitHub

查看 Github