Flutter滑动操作插件kd_slidable的使用

Flutter滑动操作插件kd_slidable的使用

kd_slidable

kd_slidable 是一个 Flutter 实现的可滑动列表项，带有方向性的滑动动作，并且可以被关闭。

特性

  • 接受开始（左/上）和结束（右/下）的动作面板。
  • 可以被关闭。
  • 包含四种内置的动作面板。
  • 包含两种内置的滑动动作小部件。
  • 包含一种内置的关闭动画。
  • 可以轻松创建自定义布局和动画。
  • 如果需要在动画期间创建特殊效果，可以使用构建器来创建滑动动作。
  • 当滑动动作被点击时会关闭（可以覆盖）。
  • 当最近的 Scrollable 开始滚动时会关闭（可以覆盖）。
  • 可以轻松禁用滑动效果。

安装

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

dependencies:
  kd_slidable: <latest_version>

在你的库中添加以下导入：

import 'package:kd_slidable/kd_slidable.dart';

入门指南

示例

Slidable(
  // 指定一个键，如果 Slidable 是可关闭的。
  key: const ValueKey(0),

  // 开始动作面板是在左侧或顶部。
  startActionPane: ActionPane(
    // 动作是一个用于控制面板如何动画的小部件。
    motion: const ScrollMotion(),

    // 动作面板可以关闭 Slidable。
    dismissible: DismissiblePane(onDismissed: () {}),

    // 所有的动作都定义在 children 参数中。
    children: const [
      // SlidableAction 可以有一个图标和/或标签。
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFFFE4A49),
        foregroundColor: Colors.white,
        widget: Icon(Icons.delete),
        label: '删除',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF21B7CA),
        foregroundColor: Colors.white,
        widget: Icon(Icons.share),
        label: '分享',
      ),
    ],
  ),

  // 结束动作面板是在右侧或底部。
  endActionPane: const ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        // 一个动作可以比其他动作更大。
        flex: 2,
        onPressed: doNothing,
        backgroundColor: Color(0xFF7BC043),
        foregroundColor: Colors.white,
        widget: Icon(Icons.archive),
        label: '归档',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF0392CF),
        foregroundColor: Colors.white,
        widget: Icon(Icons.save),
        label: '保存',
      ),
    ],
  ),

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

动画效果

背后动作（Behind Motion）

动作面板似乎在 Slidable 后面出现：

![Behind Motion]

抽屉动作（Drawer Motion）

当 Slidable 移动时，动作面板像抽屉一样动画：

![Drawer Motion]

滚动动作（Scroll Motion）

动作面板跟随 Slidable 移动：

![Scroll Motion]

伸展动作（Stretch Motion）

当 Slidable 移动时，动作面板像被拉伸一样动画：

![Stretch Motion]

控制器

你可以使用 SlidableController 来程序化地打开或关闭动作面板：

final controller = SlidableController();

// ...

Slidable(
  controller: controller,
  // ...
);

// ...

// 打开动作面板
void _handleOpen() {
  controller.openEndActionPane();
  // 或者
  //controller.openStartActionPane();
}

void _handleClose() {
  controller.close();
}

更多关于Flutter滑动操作插件kd_slidable的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter滑动操作插件kd_slidable的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


kd_slidable 是一个用于 Flutter 的滑动操作插件，它允许你在列表项或其他组件上实现滑动操作，类似于 iOS 中的滑动删除功能。通过 kd_slidable，你可以轻松地为你的应用添加上下文操作，比如删除、归档、分享等。

安装

首先，你需要在 pubspec.yaml 文件中添加 kd_slidable 依赖：

dependencies:
  flutter:
    sdk: flutter
  kd_slidable: ^latest_version

然后，运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示了如何在 ListView 中使用 KdSlidable 来实现滑动删除操作：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('kd_slidable Example'),
        ),
        body: SlidableList(),
      ),
    );
  }
}

class SlidableList extends StatelessWidget {
  final List<String> items = List.generate(20, (i) => 'Item ${i + 1}');

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return KdSlidable(
          actionPane: SlidableScrollActionPane(),
          actionExtentRatio: 0.25,
          child: ListTile(
            title: Text(items[index]),
          ),
          actions: <Widget>[
            IconSlideAction(
              caption: 'Archive',
              color: Colors.blue,
              icon: Icons.archive,
              onTap: () => _archiveItem(index),
            ),
            IconSlideAction(
              caption: 'Share',
              color: Colors.indigo,
              icon: Icons.share,
              onTap: () => _shareItem(index),
            ),
          ],
          secondaryActions: <Widget>[
            IconSlideAction(
              caption: 'Delete',
              color: Colors.red,
              icon: Icons.delete,
              onTap: () => _deleteItem(index),
            ),
          ],
        );
      },
    );
  }

  void _archiveItem(int index) {
    print('Archive: ${items[index]}');
  }

  void _shareItem(int index) {
    print('Share: ${items[index]}');
  }

  void _deleteItem(int index) {
    print('Delete: ${items[index]}');
  }
}
回到顶部