Flutter滑动操作插件flutter_swipe

特性

创建带有验证和控制器的滑动按钮。

开始使用

在您的项目中添加以下依赖：

flutter pub add flutter_swipe_me

使用方法

以下是一个完整的示例代码，展示如何使用 flutter_swipe_me 插件来实现一个滑动按钮。

示例代码

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_swipe_me/swiper.dart'; // 导入插件

void main() {
  runApp(const MyApp()); // 启动应用
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 滑动按钮示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter 滑动按钮演示'), // 主页面
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: [
            // 滑动按钮组件
            SwipingButton(
              validateOnScroll: () => true, // 验证是否可以滑动（true表示允许滑动）
              text: "Swipe Me", // 按钮上的文字
              turnOfAnimation: false, // 是否关闭动画效果（false表示开启）
              size: const Size(400, 60), // 按钮的尺寸
              thumbWidth: 80, // 滑块宽度
              bgColor: Colors.grey.shade200, // 背景颜色
              textGradientColor: const [Colors.red, Colors.yellow], // 文字渐变色
              boxShadow: [
                // 阴影效果
                BoxShadow(
                  color: Colors.grey.shade200,
                  offset: Offset(-3, -3),
                  blurRadius: 8,
                  spreadRadius: 8,
                ),
                BoxShadow(
                  color: Colors.grey.shade200,
                  offset: Offset(4, 4),
                  blurRadius: 8,
                  spreadRadius: 8,
                ),
              ],
              swipedBgColor: Colors.red, // 滑动完成后背景颜色
              textStyle: const TextStyle().copyWith(
                color: Colors.grey[400]!.withOpacity(.5), // 文字样式
              ),
              swipingButtonController: (controller) {
                // 获取控制器
              },
              onSwipeComplete: () {
                print("滑动完成"); // 滑动完成后的回调函数
              },
            ),
          ],
        ),
      ),
    );
  }
}

ionicwang 1楼•13 天前

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

flutter_swipe_me 是一个用于在 Flutter 应用中实现滑动操作的插件。它允许你轻松地创建可滑动的卡片或列表项，并处理滑动事件。以下是如何使用 flutter_swipe_me 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_swipe_me 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_swipe_me: ^1.0.0  # 请检查最新版本

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

2. 导入插件

在你的 Dart 文件中导入 flutter_swipe_me 插件。

import 'package:flutter_swipe_me/flutter_swipe_me.dart';

3. 使用 `SwipeMe` 组件

SwipeMe 是 flutter_swipe_me 插件中的主要组件。你可以使用它来创建一个可滑动的卡片或列表项。

class SwipeMeExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipe Me Example'),
      ),
      body: Center(
        child: SwipeMe(
          child: Container(
            width: 300,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Swipe Me!',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          onSwipeLeft: () {
            print('Swiped Left');
          },
          onSwipeRight: () {
            print('Swiped Right');
          },
          onSwipeUp: () {
            print('Swiped Up');
          },
          onSwipeDown: () {
            print('Swiped Down');
          },
        ),
      ),
    );
  }
}

4. 处理滑动事件

SwipeMe 组件提供了多个回调函数来处理不同的滑动事件：

onSwipeLeft: 当用户向左滑动时触发。
onSwipeRight: 当用户向右滑动时触发。
onSwipeUp: 当用户向上滑动时触发。
onSwipeDown: 当用户向下滑动时触发。

你可以在这些回调函数中执行任何你需要的操作，例如更新 UI 或触发某些逻辑。

5. 自定义滑动行为

SwipeMe 组件还允许你自定义滑动行为。你可以通过设置 swipeThreshold 和 swipeVelocityThreshold 来控制滑动的敏感度。

SwipeMe(
  child: Container(
    width: 300,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text(
        'Swipe Me!',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  ),
  onSwipeLeft: () {
    print('Swiped Left');
  },
  onSwipeRight: () {
    print('Swiped Right');
  },
  swipeThreshold: 0.5,  // 滑动阈值
  swipeVelocityThreshold: 1.0,  // 滑动速度阈值
);

6. 完整示例

以下是一个完整的示例，展示了如何使用 flutter_swipe_me 插件创建一个可滑动的卡片，并处理滑动事件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SwipeMeExample(),
    );
  }
}

class SwipeMeExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipe Me Example'),
      ),
      body: Center(
        child: SwipeMe(
          child: Container(
            width: 300,
            height: 100,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Swipe Me!',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          onSwipeLeft: () {
            print('Swiped Left');
          },
          onSwipeRight: () {
            print('Swiped Right');
          },
          onSwipeUp: () {
            print('Swiped Up');
          },
          onSwipeDown: () {
            print('Swiped Down');
          },
        ),
      ),
    );
  }
}

Flutter滑动操作插件flutter_swipe_me的使用

特性