Flutter滑动操作插件flutter_slidable

Flutter滑动操作插件flutter_slidable_plus的使用

特性

支持左侧（顶部）和右侧（底部）动作面板。
可以被取消。
提供了4种内置的动作面板。
提供了2种内置的滑动手势组件。
提供了1种内置的取消动画。
可以轻松创建自定义布局和动画。
如果需要在动画过程中使用特殊效果，可以使用构建器来创建滑动手势。
当滑动手势中的动作被点击时，会自动关闭（可覆盖）。
当最近的滚动组件开始滚动时，会自动关闭（可覆盖）。
可以轻松禁用滑动手势效果。
可以使用自定义小部件作为图标。

安装

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

dependencies:
  flutter_slidable_plus: <latest_version>

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

import 'package:flutter_slidable_plus/flutter_slidable_plus.dart';

开始使用

例如：

Slidable(
  // 指定一个键如果Slidable是可以被取消的。
  key: const ValueKey(0),

  // 起始动作面板位于左边或顶部。
  startActionPane: ActionPane(
    // 动作是通过动画来控制的。
    motion: const ScrollMotion(),

    // 面板可以取消滑动手势。
    dismissible: DismissiblePane(onDismissed: () {}),

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

  // 结束动作面板位于右边或底部。
  endActionPane: const ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        // 动作可以比其他动作更大。
        flex: 2,
        onPressed: doNothing,
        backgroundColor: Color(0xFF7BC043),
        foregroundColor: Colors.white,
        icon: Icon(Icons.archive),
        label: 'Archive',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF0392CF),
        foregroundColor: Colors.white,
        icon: Icon(Icons.save),
        label: 'Save',
      ),
    ],
  ),

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

动画效果

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

后面的动画效果

动作面板看起来像是在Slidable后面：

抽屉动画效果

动作面板看起来像是抽屉，在Slidable移动时动画：

滚动动画效果

动作面板跟随Slidable一起移动：

拉伸动画效果

动作面板看起来像是被拉伸，在Slidable移动时动画：

控制器

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

final controller = SlidableController();

// ...

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

// ...

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

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

示例代码

以下是完整的示例代码：

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Slidable Example',
      home: Scaffold(
        body: ListView(
          children: [
            Slidable(
              // 指定一个键如果Slidable是可以被取消的。
              key: const ValueKey(0),

              // 起始动作面板位于左边或顶部。
              startActionPane: ActionPane(
                // 动作是通过动画来控制的。
                motion: const ScrollMotion(),

                // 面板可以取消滑动手势。
                dismissible: DismissiblePane(onDismissed: () {}),

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

              // 结束动作面板位于右边或底部。
              endActionPane: ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    // 动作可以比其他动作更大。
                    flex: 2,
                    onPressed: (_) => controller.openEndActionPane(),
                    backgroundColor: const Color(0xFF7BC043),
                    foregroundColor: Colors.white,
                    icon: const Icon(Icons.archive),
                    label: 'Archive',
                  ),
                  SlidableAction(
                    onPressed: (_) => controller.close(),
                    backgroundColor: const Color(0xFF0392CF),
                    foregroundColor: Colors.white,
                    icon: const Icon(Icons.save),
                    label: 'Save',
                  ),
                ],
              ),

              // Slidable的子组件是用户在未拖动组件时看到的内容。
              child: const ListTile(title: Text('Slide me')),
            ),
            Slidable(
              controller: controller,
              // 指定一个键如果Slidable是可以被取消的。
              key: const ValueKey(1),

              // 起始动作面板位于左边或顶部。
              startActionPane: const ActionPane(
                // 动作是通过动画来控制的。
                motion: ScrollMotion(),

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

              // 结束动作面板位于右边或底部。
              endActionPane: ActionPane(
                motion: const ScrollMotion(),
                dismissible: DismissiblePane(onDismissed: () {}),
                children: const [
                  SlidableAction(
                    // 动作可以比其他动作更大。
                    flex: 2,
                    onPressed: doNothing,
                    backgroundColor: Color(0xFF7BC043),
                    foregroundColor: Colors.white,
                    icon: Icon(Icons.archive),
                    label: 'Archive',
                  ),
                  SlidableAction(
                    onPressed: doNothing,
                    backgroundColor: Color(0xFF0392CF),
                    foregroundColor: Colors.white,
                    icon: Icon(Icons.save),
                    label: 'Save',
                  ),
                ],
              ),

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

void doNothing(BuildContext context) {}

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

sinazl 1楼

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

flutter_slidable_plus 是一个用于在 Flutter 应用中实现滑动操作效果的插件。它是 flutter_slidable 插件的一个扩展版本，提供了更多的自定义选项和功能。通过这个插件，你可以轻松地为列表项添加左右滑动操作，比如删除、归档、分享等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_slidable_plus: ^0.0.1

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

基本用法

以下是一个简单的示例，展示如何使用 flutter_slidable_plus 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Slidable Plus Example'),
        ),
        body: ListView(
          children: [
            Slidable(
              key: const ValueKey(1),
              startActionPane: ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (context) {
                      // Handle the action
                      print('Archive pressed');
                    },
                    backgroundColor: Colors.blue,
                    foregroundColor: Colors.white,
                    icon: Icons.archive,
                    label: 'Archive',
                  ),
                  SlidableAction(
                    onPressed: (context) {
                      // Handle the action
                      print('Share pressed');
                    },
                    backgroundColor: Colors.green,
                    foregroundColor: Colors.white,
                    icon: Icons.share,
                    label: 'Share',
                  ),
                ],
              ),
              endActionPane: ActionPane(
                motion: const ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: (context) {
                      // Handle the action
                      print('Delete pressed');
                    },
                    backgroundColor: Colors.red,
                    foregroundColor: Colors.white,
                    icon: Icons.delete,
                    label: 'Delete',
                  ),
                ],
              ),
              child: const ListTile(
                title: Text('Slide me'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}