Flutter滑动按钮交互插件flutter_swipe_button的使用
Flutter滑动按钮交互插件flutter_swipe_button的使用
flutter_swipe_button
flutter_swipe_button
插件提供了一种避免意外点击或对话框的方法,通过使用可滑动的按钮来确认用户的操作。
截图
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
更多关于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!'),
},
],
),
),
);
}
}
在这个示例中:
- 我们首先创建了一个基本的Flutter应用程序,并在
MyApp
组件中设置了应用程序的主题和主页。 MyHomePage
是一个有状态的组件,它包含一个布尔值isButtonSwiped
来跟踪按钮是否已被滑动。handleSuccess
和handleCancel
方法分别在成功滑动和取消滑动时被调用,并更新isButtonSwiped
状态。- 在
build
方法中,我们使用SwipeButton
组件来创建滑动按钮。我们配置了按钮的宽度、高度、图标大小、滑动阈值、是否自动关闭、动画持续时间、成功和取消的图标以及标签文本。 - 当按钮被滑动时,
onSwiped
回调会根据滑动方向调用handleSuccess
或handleCancel
方法。 - 如果按钮已经被滑动,我们在界面上显示一个文本提示。
这个示例展示了如何使用flutter_swipe_button
插件来实现基本的滑动按钮交互。你可以根据需要进一步自定义和扩展这个示例。