Flutter滑动匹配插件flutter_tinder_swipe的使用
Flutter滑动匹配插件flutter_tinder_swipe的使用
flutter_tinder_swipe 是一个用于在Flutter应用中实现类似Tinder滑动卡片机制的插件。通过这个插件，你可以轻松地创建可滑动的内容卡片，用户可以通过左右滑动来选择或拒绝卡片。
安装和配置
首先，在你的 pubspec.yaml 文件中添加 flutter_tinder_swipe 依赖：
dependencies:
flutter:
sdk: flutter
flutter_tinder_swipe: ^最新版本号
然后运行 flutter pub get 来安装依赖。
示例代码
以下是一个完整的示例代码，展示了如何使用 flutter_tinder_swipe 插件来创建一个简单的滑动卡片界面。这个示例包括了基本的卡片布局、滑动事件处理以及按钮控制。
import 'package:flutter/material.dart';
import 'package:flutter_tinder_swipe/flutter_tinder_swipe.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 创建一个 CardController 实例来控制卡片的滑动
CardController controller = CardController();
// 图片数据列表
List<dynamic> imageItems = [
{"image": "assets/img1.jpg"},
{"image": "assets/image2.jpg"},
{"image": "assets/imgg.jpg"},
{"image": "assets/img4.jpg"},
];
[@override](/user/override)
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
body: Center(
child: _showPrefListData(size, controller),
),
),
);
}
// 构建卡片显示区域
Widget _showPrefListData(Size size, CardController cardController) {
return Column(
children: [
// 卡片展示区域
Center(
child: Container(
margin: const EdgeInsets.only(top: 50),
height: size.height * 0.6,
child: SwipeCard(
// 设置卡片的垂直滑动边缘
swipeEdgeVertical: 8.0,
// 动画持续时间（毫秒）
animDuration: 500,
// 卡片总数
totalNum: 3,
// 显示的卡片堆叠数量
stackNum: 3,
// 设置卡片的滑动边缘
swipeEdge: 2.0,
// 是否允许垂直滑动
allowVerticalMovement: false,
// 卡片的最大宽度
maxWidth: MediaQuery.of(context).size.width * 1,
// 卡片的最小宽度
minWidth: MediaQuery.of(context).size.width * 0.8,
// 卡片的最小高度
minHeight: MediaQuery.of(context).size.width + 120 * 0.88,
// 卡片的最大高度
maxHeight: MediaQuery.of(context).size.width + 120 * 0.99,
// 构建卡片内容
cardBuilder: (context, index) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Stack(
alignment: Alignment.bottomCenter,
children: [
// 使用 FadeInImage 加载图片
ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: FadeInImage(
fit: BoxFit.cover,
height: MediaQuery.of(context).size.height * 1,
width: MediaQuery.of(context).size.width,
image: AssetImage(imageItems[index]['image']),
placeholder: AssetImage(imageItems[index]['image']),
),
),
// 底部信息栏
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
height: size.height * 0.15,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20),
),
color: Colors.white,
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black45],
begin: FractionalOffset(1.0, 0.0),
end: FractionalOffset(0.0, 1.0),
stops: [0.0, 1.0],
tileMode: TileMode.clamp,
),
),
child: Column(
children: [
// 用户姓名和年龄
Text(
"Kylie Jean | Age 25",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
fontSize: size.width * 0.09,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Actor/Model',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w400,
fontSize: size.width * 0.04,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
)
],
),
),
),
],
),
),
),
// 卡片控制器
cardController: cardController,
// 滑动更新回调
swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
// 获取滑动卡片的对齐方式
if (align.x < 0) {
// 卡片向左滑动
print("Card is LEFT swiping");
} else if (align.x > 0) {
// 卡片向右滑动
print("Card is RIGHT swiping");
}
},
// 滑动完成回调
swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
// 处理滑动完成后的逻辑
print("Card swiped $orientation at index $index");
},
),
),
),
// 操作按钮区域
Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// 左滑按钮
FloatingActionButton(
elevation: 10,
heroTag: null,
onPressed: () {
cardController.swipeLeft();
},
backgroundColor: Colors.white,
child: Image.asset(
'assets/decline.png', // 替换为实际的图片路径
height: 30,
width: 30,
),
),
// 右滑按钮
FloatingActionButton(
elevation: 10,
heroTag: null,
onPressed: () {
cardController.swipeRight();
},
backgroundColor: Colors.white,
child: Image.asset(
'assets/heart.png', // 替换为实际的图片路径
height: 30,
width: 30,
),
),
],
),
),
],
);
}
}
更多关于Flutter滑动匹配插件flutter_tinder_swipe的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter滑动匹配插件flutter_tinder_swipe的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用flutter_tinder_swipe插件的示例代码。这个插件允许你创建类似Tinder的滑动卡片效果。
首先，确保你已经在pubspec.yaml文件中添加了flutter_tinder_swipe依赖：
dependencies:
flutter:
sdk: flutter
flutter_tinder_swipe: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来，我们创建一个简单的Flutter应用来演示如何使用flutter_tinder_swipe。
主应用文件 main.dart
import 'package:flutter/material.dart';
import 'package:flutter_tinder_swipe/flutter_tinder_swipe.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Tinder Swipe Demo'),
),
body: TinderSwipe(
swipeData: getSwipeData(),
onCardSwipeLeft: () {
print('Card swiped left!');
},
onCardSwipeRight: () {
print('Card swiped right!');
},
onCardEndSwipe: (index) {
print('Card $index swiped to end!');
},
cardBuilder: (context, index) {
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text(
'Card ${index + 1}',
style: TextStyle(fontSize: 24),
),
),
),
);
},
),
),
);
}
List<String> getSwipeData() {
// 生成一些示例数据
List<String> data = [];
for (int i = 0; i < 20; i++) {
data.add('Data $i');
}
return data;
}
}
解释
-
依赖导入：确保在
pubspec.yaml中添加了flutter_tinder_swipe依赖。 -
主应用结构：
- 使用
MaterialApp和Scaffold来创建应用的基本结构。 - 在
Scaffold的body中使用TinderSwipe组件。
- 使用
-
TinderSwipe组件：
swipeData：提供滑动卡片的数据。这里我们简单地生成了一个包含20个字符串的列表。onCardSwipeLeft：当卡片向左滑动时调用的回调函数。onCardSwipeRight：当卡片向右滑动时调用的回调函数。onCardEndSwipe：当卡片滑动到结束时调用的回调函数，index是滑动的卡片索引。cardBuilder：用于构建每个卡片的函数，这里我们简单地返回了一个带有文本的卡片。
这个示例展示了如何使用flutter_tinder_swipe插件来创建一个基本的滑动卡片效果。你可以根据需要自定义卡片的内容、样式和回调函数的行为。
