Flutter滑动按钮交互插件flutter_swipe_button的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter滑动按钮交互插件flutter_swipe_button的使用

flutter_swipe_button

pub package License: MIT

flutter_swipe_button 插件提供了一种避免意外点击或对话框的方法,通过使用可滑动的按钮来确认用户的操作。

截图

Example 1 Example 2 Example 3
Example 1 Example 2 Example 3

开始使用

添加依赖

pubspec.yaml 文件中添加以下内容:

dependencies:
  flutter_swipe_button: ^2.1.1+1

导入包

在 Dart 文件中导入 flutter_swipe_button 包:

import 'package:flutter_swipe_button/flutter_swipe_button.dart';

使用方法

以下是几种使用 SwipeButton 的示例代码:

示例 1: 扩展型滑动按钮

SwipeButton.expand(
  thumb: Icon(
    Icons.double_arrow_rounded,
    color: Colors.white,
  ),
  child: Text(
    "Swipe to ...",
    style: TextStyle(
      color: Colors.red,
    ),
  ),
  activeThumbColor: Colors.red,
  activeTrackColor: Colors.grey.shade300,
  onSwipe: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("Swipped"),
        backgroundColor: Colors.green,
      ),
    );
  },
)

示例 2: 带有内边距的滑动按钮

SwipeButton(
  trackPadding: EdgeInsets.all(6),
  elevationThumb: 2,
  child: Text(
    "Swipe to ...",
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  onSwipe: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("Swipped"),
        backgroundColor: Colors.green,
      ),
    );
  },
)

示例 3: 自定义图标和样式的滑动按钮

SwipeButton(
  thumbPadding: EdgeInsets.all(3),
  thumb: Icon(
    Icons.chevron_right,
    color: Colors.white,
  ),
  elevationThumb: 2,
  elevationTrack: 2,
  child: Text(
    "Swipe to ...".toUpperCase(),
    style: TextStyle(
      color: Colors.white,
      fontSize: 18,
      fontWeight: FontWeight.bold,
    ),
  ),
  onSwipe: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("Swipped"),
        backgroundColor: Colors.green,
      ),
    );
  },
)

示例 4: 圆角滑动按钮

SwipeButton(
  borderRadius: BorderRadius.circular(8),
  activeTrackColor: Colors.amber,
  height: 60,
  child: Text(
    "Swipe to ...",
    style: TextStyle(
      color: Colors.red,
    ),
  ),
  onSwipe: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("Swipped"),
        backgroundColor: Colors.green,
      ),
    );
  },
)

示例 5: 不同颜色组合的滑动按钮

SwipeButton(
  activeTrackColor: Colors.blue,
  activeThumbColor: Colors.yellow,
  borderRadius: BorderRadius.zero,
  height: 30,
  child: Text(
    "Swipe to ...",
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  onSwipe: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("Swipped"),
        backgroundColor: Colors.green,
      ),
    );
  },
)

示例 6: 固定宽度的滑动按钮

SwipeButton(
  width: 200,
  child: Text(
    "Swipe to ...",
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  onSwipe: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("Swipped"),
        backgroundColor: Colors.green,
      ),
    );
  },
)

完整示例 Demo

以下是一个完整的示例应用,展示了如何在页面中使用 SwipeButton 组件:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 8,
              ),
              child: SwipeButton.expand(
                duration: const Duration(milliseconds: 200),
                thumb: const Icon(
                  Icons.double_arrow_rounded,
                  color: Colors.white,
                ),
                activeThumbColor: Colors.red,
                activeTrackColor: Colors.grey.shade300,
                onSwipe: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text("Swipped"),
                      backgroundColor: Colors.green,
                    ),
                  );
                },
                child: const Text(
                  "Swipe to ...",
                  style: TextStyle(
                    color: Colors.red,
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 8,
              ),
              child: SwipeButton(
                trackPadding: const EdgeInsets.all(6),
                elevationThumb: 2,
                elevationTrack: 2,
                child: const Text(
                  "Swipe to ...",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                onSwipe: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text("Swipped"),
                      backgroundColor: Colors.green,
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 8,
              ),
              child: SwipeButton(
                thumbPadding: const EdgeInsets.all(3),
                thumb: const Icon(
                  Icons.chevron_right,
                  color: Colors.white,
                ),
                elevationThumb: 2,
                elevationTrack: 2,
                child: Text(
                  "Swipe to ...".toUpperCase(),
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                onSwipe: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text("Swipped"),
                      backgroundColor: Colors.green,
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 8,
              ),
              child: SwipeButton(
                borderRadius: BorderRadius.circular(8),
                activeTrackColor: Colors.amber,
                height: 60,
                child: const Text(
                  "Swipe to ...",
                  style: TextStyle(
                    color: Colors.red,
                  ),
                ),
                onSwipe: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text("Swipped"),
                      backgroundColor: Colors.green,
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 8,
              ),
              child: SwipeButton(
                activeTrackColor: Colors.blue,
                activeThumbColor: Colors.yellow,
                borderRadius: BorderRadius.zero,
                height: 30,
                child: const Text(
                  "Swipe to ...",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                onSwipe: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text("Swipped"),
                      backgroundColor: Colors.green,
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 8,
              ),
              child: SwipeButton(
                width: 200,
                child: const Text(
                  "Swipe to ...",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                onSwipe: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text("Swipped"),
                      backgroundColor: Colors.green,
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

许可证

MIT License

以上是 flutter_swipe_button 插件的详细使用说明和完整示例。希望这些信息能帮助您更好地理解和使用该插件。如果有任何问题或需要进一步的帮助,请随时提问!


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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用flutter_swipe_button插件来实现滑动按钮交互的示例代码。这个插件允许你创建一个可以左右滑动的按钮,常用于确认或取消操作。

首先,确保你已经将flutter_swipe_button添加到你的pubspec.yaml文件中:

dependencies:
  flutter:
    sdk: flutter
  flutter_swipe_button: ^x.y.z  # 请替换为最新版本号

然后,运行flutter pub get来安装该插件。

接下来,你可以在你的Flutter项目中实现滑动按钮。以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Swipe Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isButtonSwiped = false;

  void handleSuccess() {
    setState(() {
      isButtonSwiped = true;
      // 在这里处理成功滑动后的逻辑
      print("Button swiped successfully!");
    });
  }

  void handleCancel() {
    setState(() {
      isButtonSwiped = false;
      // 在这里处理取消滑动后的逻辑
      print("Button swipe canceled!");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Swipe Button Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (!isButtonSwiped) {
              SwipeButton(
                onSwiped: (direction) {
                  if (direction == SwipeDirection.Success) {
                    handleSuccess();
                  } else if (direction == SwipeDirection.Cancel) {
                    handleCancel();
                  }
                },
                successColor: Colors.green,
                cancelColor: Colors.red,
                buttonWidth: 200.0,
                buttonHeight: 50.0,
                iconWidth: 40.0,
                iconHeight: 40.0,
                threshold: 0.6,
                autoClose: true,
                animationDuration: 300,
                successIcon: Icons.check,
                cancelIcon: Icons.clear,
                label: Text('Swipe to Confirm'),
              ),
            } else {
              Text('Button has been swiped!'),
            },
          ],
        ),
      ),
    );
  }
}

在这个示例中:

  1. 我们首先创建了一个基本的Flutter应用程序,并在MyApp组件中设置了应用程序的主题和主页。
  2. MyHomePage是一个有状态的组件,它包含一个布尔值isButtonSwiped来跟踪按钮是否已被滑动。
  3. handleSuccesshandleCancel方法分别在成功滑动和取消滑动时被调用,并更新isButtonSwiped状态。
  4. build方法中,我们使用SwipeButton组件来创建滑动按钮。我们配置了按钮的宽度、高度、图标大小、滑动阈值、是否自动关闭、动画持续时间、成功和取消的图标以及标签文本。
  5. 当按钮被滑动时,onSwiped回调会根据滑动方向调用handleSuccesshandleCancel方法。
  6. 如果按钮已经被滑动,我们在界面上显示一个文本提示。

这个示例展示了如何使用flutter_swipe_button插件来实现基本的滑动按钮交互。你可以根据需要进一步自定义和扩展这个示例。

回到顶部