Flutter滑动操作激活插件slide_to_act_reborn的使用
Flutter滑动操作激活插件 slide_to_act_reborn 的使用
slide_to_act_reborn 是一个受 Android 滑动解锁启发的简单滑动解锁小部件。它为 Flutter 应用提供了一个优雅的方式来实现滑动解锁功能。
开始使用
首先，你需要在项目的 pubspec.yaml 文件中添加 slide_to_act_reborn 依赖：
dependencies:
slide_to_act_reborn: any # 或者最新的版本号
然后运行 flutter pub get 来安装依赖。
示例代码
下面是一个完整的示例 Demo，展示了如何使用 slide_to_act_reborn 插件的不同配置和功能：
import 'package:flutter/material.dart';
import 'package:slide_to_act_reborn/slide_to_act_reborn.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Slide to act Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ListView(
children: <Widget>[
Builder(
builder: (context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: SlideAction(),
);
},
),
Builder(
builder: (context) {
final GlobalKey<SlideActionState> _key = GlobalKey();
return Padding(
padding: const EdgeInsets.all(8.0),
child: SlideAction(
key: _key,
onSubmit: () {
Future.delayed(
Duration(seconds: 1),
() => _key.currentState?.reset(),
);
},
),
);
},
),
Builder(
builder: (context) {
final GlobalKey<SlideActionState> _key = GlobalKey();
return Padding(
padding: const EdgeInsets.all(8.0),
child: SlideAction(
key: _key,
onSubmit: () {
Future.delayed(
Duration(seconds: 1),
() => _key.currentState?.reset(),
);
},
innerColor: Colors.black,
outerColor: Colors.white,
),
);
},
),
Builder(
builder: (context) {
final GlobalKey<SlideActionState> _key = GlobalKey();
return Padding(
padding: const EdgeInsets.all(8.0),
child: SlideAction(
key: _key,
onSubmit: () {
Future.delayed(
Duration(seconds: 1),
() => _key.currentState?.reset(),
);
},
alignment: Alignment.centerRight,
child: Text(
'Unlock',
style: TextStyle(
color: Colors.white,
),
),
sliderButtonIcon: Icon(Icons.lock),
),
);
},
),
// 更多配置示例...
Builder(
builder: (context) {
final GlobalKey<SlideActionState> _key = GlobalKey();
return Padding(
padding: const EdgeInsets.all(8.0),
child: SlideAction(
key: _key,
onSubmit: () {
Future.delayed(
Duration(seconds: 1),
() => _key.currentState?.reset(),
);
},
borderRadius: 16,
animationDuration: Duration(seconds: 1),
),
);
},
),
Builder(
builder: (context) {
final GlobalKey<SlideActionState> _key = GlobalKey();
return Padding(
padding: const EdgeInsets.all(8.0),
child: SlideAction(
key: _key,
onSubmit: () {
Future.delayed(
Duration(seconds: 1),
() => _key.currentState?.reset(),
);
},
reversed: true,
),
);
},
),
Builder(
builder: (context) {
final GlobalKey<SlideActionState> _key = GlobalKey();
return Padding(
padding: const EdgeInsets.all(8.0),
child: SlideAction(
key: _key,
onSubmit: () {
Future.delayed(
Duration(seconds: 1),
() => _key.currentState?.reset(),
);
},
submittedIcon: Icon(
Icons.done_all,
color: Colors.white,
),
),
);
},
),
],
),
),
);
}
}
关键属性说明
onSubmit: 当用户完成滑动时触发的回调函数。innerColor: 滑块内部的颜色。outerColor: 滑块外部的颜色。alignment: 滑块对齐方式。child: 自定义滑块内的内容。sliderButtonIcon: 滑块按钮上的图标。borderRadius: 圆角半径。reversed: 是否反转滑动方向（从右到左）。submittedIcon: 提交后显示的图标。
通过这些配置选项，你可以轻松创建符合你应用风格的滑动解锁组件。
更多关于Flutter滑动操作激活插件slide_to_act_reborn的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter滑动操作激活插件slide_to_act_reborn的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用slide_to_act_reborn插件的示例代码。这个插件允许你在列表中实现滑动激活（如删除、标记等）的操作。
首先，你需要在你的pubspec.yaml文件中添加这个插件的依赖：
dependencies:
flutter:
sdk: flutter
slide_to_act_reborn: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来是一个完整的示例代码，展示如何在Flutter中使用slide_to_act_reborn插件：
import 'package:flutter/material.dart';
import 'package:slide_to_act_reborn/slide_to_act_reborn.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Slide To Act Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SlideToActDemo(),
);
}
}
class SlideToActDemo extends StatefulWidget {
@override
_SlideToActDemoState createState() => _SlideToActDemoState();
}
class _SlideToActDemoState extends State<SlideToActDemo> {
List<String> items = List.generate(20, (index) => "Item ${index + 1}");
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Slide To Act Demo'),
),
body: SlideToAct(
actionCount: 2,
actionPainter: (
BuildContext context,
SlideActionType actionType,
double slidePercent,
Animation<double> animation,
double childWidth,
double childHeight,
) {
Color color = actionType == SlideActionType.LEFT
? Colors.red
: actionType == SlideActionType.RIGHT
? Colors.green
: Colors.transparent;
return SlideActionPainter(
color: color,
childWidth: childWidth,
childHeight: childHeight,
slidePercent: slidePercent,
);
},
actionExtent: 50.0,
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return SlideToActItem(
key: ValueKey(items[index]),
child: ListTile(
title: Text(items[index]),
),
onAction: (actionType) {
setState(() {
if (actionType == SlideActionType.LEFT) {
// 删除操作
items.removeAt(index);
} else if (actionType == SlideActionType.RIGHT) {
// 标记操作
// 这里可以添加标记逻辑
print("Marked item: ${items[index]}");
}
});
},
);
},
),
),
);
}
}
class SlideActionPainter extends CustomPainter {
final Color color;
final double childWidth;
final double childHeight;
final double slidePercent;
SlideActionPainter({
required this.color,
required this.childWidth,
required this.childHeight,
required this.slidePercent,
});
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint()..color = color;
double actionWidth = size.width * slidePercent;
if (actionWidth < 0) {
actionWidth = 0;
} else if (actionWidth > size.width) {
actionWidth = size.width;
}
canvas.drawRect(
Rect.fromLTWH(0, 0, actionWidth, size.height),
paint,
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return oldDelegate != this;
}
}
在这个示例中，我们创建了一个包含20个项目的列表。每个项目都可以向左或向右滑动来触发不同的操作。左滑会删除项目，右滑会打印一条消息（你可以替换为实际的标记逻辑）。
注意：
SlideToAct组件接受一个actionCount参数，指定可以滑动的操作数量（本例中为2，即左滑和右滑）。actionPainter参数用于自定义滑动操作的视觉效果。actionExtent参数定义了滑动操作的宽度。SlideToActItem组件用于包裹每个列表项，并处理滑动操作。
希望这个示例对你有帮助！
