flutter_slidable

可滑动列表的 Flutter 实现，列表项目带有横向可消除的滑动操作。

捐献者

我们的主要捐献者列在下面！

Try the Flutter Chat Tutorial 💬

从 0.6.0 迁移

可以阅读这个简单的指南从 0.6 迁移到 1.0 :
github.com/letsar/flut…

特性

可以由开始 (左/顶) 到结束 (右/底) 的操作窗格。
可消除。
4 个内置的操作窗格。
2 个内置的滑动操作组件。
1 个内置的消除动画。
可以轻易地创建自定义的布局和动画。
如果要在动画中加上特殊的效果，可以使用 builder 创建滑块的操作。
点击操作滑块时关闭（可覆写）。
最邻近的 Scrollable 开始滑动时关闭（可覆写）。
有易于禁用滑动效果的选项。

安装

在 Flutter 工程的 pubspec.yaml 里，添加下面的依赖：

dependencies:
  flutter_slidable: <latest_version>

在代码里添加下面的 import ：

import 'package:flutter_slidable/flutter_slidable.dart';

快速开始

示例：

Slidable(
  // 如果滑动组件是可消除的，需要指定 key 。
  key: const ValueKey(0),

  // 开始操作的窗格位于左边或顶部的滑块。
  startActionPane: ActionPane(
    // motion 是用于控制窗格动画方式的组件。
    motion: const ScrollMotion(),

    // 可消除 Slidable 的窗格。
    dismissible: DismissiblePane(onDismissed: () {}),

    // 所有的动作都定义在 children 参数中。
    children: const [
      // 一个 SlidableAction 有一个图标 和/或 一个标签。
      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',
      ),
    ],
  ),

  // 结束操作窗格是位于右边或底部的滑块。
  endActionPane: const ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        // 一个操作可以比其它的大一些。
        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',
      ),
    ],
  ),

  // Slidable 的 child 是组件未被拖动时用户能看到的内容。
  child: const ListTile(title: Text('Slide me')),
),

Motion (运动组件)

任何 ActionPane 都有一个 motinon 参数，它可以用来定义用户拖动 Slidable 时，窗格的动画方式。

Behind Motion (置后)

操作（组件）看上去就像是从 Slidable 的后面出来的：

Drawer Motion (抽屉)

当 Slidable 滑动时，操作（组件）的动画就像是在拉抽屉：

Scroll Motion （滑动）

操作（组件）会跟着 Slidable 一起动：

Stretch Motion (拉伸)

当 Slidable 滑动时，操作（组件）的动画是它们被拉伸：

常见问题

可以阅读这里的常见问题：github.com/letsar/flut…

[译]Flutter Favorite 之强大的可滑动列表组件 flutter_slidable