用Flutter实现一个仿“探探”的左右滑动选择喜欢/不喜欢的效果

最新推荐文章于 2023-10-19 16:24:53 发布
最新推荐文章于 2023-10-19 16:24:53 发布
阅读量4k 收藏 3
点赞数 2
分类专栏： FlutterUI 文章标签： Flutter 探探
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yumi0629/article/details/83383553
版权

  写在前面，效果已经基本OK了，但是有些细节还没处理好。暂时主要有三个问题：

  • 用户手势到达屏幕边缘时释放，如果旋转角度过小，动画总感觉有些不流畅（也可能是我的错觉吧）；
  • 给数据刷新提供的API还没想好，现在塞数据比较麻烦；
  • 因为UI设计是根据用户手势移动布局位置的，因此用户每次手势位置改变，都需要刷新布局，现在是用setState的方式去刷新的，不清楚在布局复杂的情况下是否会有性能问题。

  支持无限刷新。

代码：github.com/yumi0629/Fl…

效果图：

 

drag_like.gif

 

 

整体思路

  上层是一个支持用户手势监听的Widget，随着用户的手势进行平移+旋转变换；下层Widget虽然不支持手势监听，但是会接收上层布局的动画进度回调，进行放大，因此看起来也是跟随着手势的：   

最低0.47元/天 解锁文章
吉原拉面
关注
专栏目录
仿探探左右滑动的简单实现
xw_414的博客
05-23 4123
一、导入依赖 compile 'me.yuqirong:cardswipelayout:1.0.0' // recylerview依赖： compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'二、布局文件1、activity_main.xml<?xml version="1.0" encoding="utf-8...
Flutter 色彩选择器：为你的应用增添色彩
最新发布
gitblog_00162的博客
09-07 310
Flutter 色彩选择器：为你的应用增添色彩 flutter_colorpickerHSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_colorpic...
Flutter 仿探探卡片滑动效果（上下左右）
qq_36425505的博客
10-19 1004
【代码】Flutter 放探探卡片滑动效果（上下左右）
仿探探卡片滑动效果
潇湘夜雨
11-22 1222
首先导入依赖 compile 'com.github.bumptech.glide:glide:3.6.1' github定制，主要的是里面的casdswipelayout，然后直接观察一下fanxianfragment里面的实现代码，即可简单实现 Github下载定制
android 探探左右滑动效果,用Flutter实现一个仿“探探”的左右滑动选择喜欢/不喜欢的效果...
weixin_39550486的博客
05-29 758
写在前面，效果已经基本OK了，但是有些细节还没处理好。暂时主要有三个问题：用户手势到达屏幕边缘时释放，如果旋转角度过小，动画总感觉有些不流畅(也可能是我的错觉吧)；给数据刷新提供的API还没想好，现在塞数据比较麻烦；因为UI设计是根据用户手势移动布局位置的，因此用户每次手势位置改变，都需要刷新布局，现在是用setState的方式去刷新的，不清楚在布局复杂的情况下是否会有性能问题。支持无限刷新。效果...
Flutter 仿探探编辑页图片展示控件
zhumj_zhumj的专栏
01-08 552
Flutter 仿探探编辑页图片展示控件
模仿探探左右滑动的卡片效果
06-01
在Android开发中，模仿探探应用的左右滑动卡片效果是一项常见的需求，它为用户提供了一种直观且有趣的交互方式。这种效果通常应用于匹配或者选择类的界面，用户可以通过简单的手势来表达他们的喜好或不喜好。在本...
水波纹+仿探探卡片滑动+飘赞动画
01-03
Android开发UI效果一、水波纹二、仿探探滑动卡片三、飘赞动画 本篇文章主要记录一下开发过程通过网上搜索和本项目需求结合最终实现效果做个记录， 本人比较赖，就不抽demo了，关键代码已贴，仿探探卡片相关文件附git...
flutter_tindercard:带有颤振的Tinder（探探）卡小工具构建
05-14
在您的小部件布局中添加TinderSwapCard并编写所需的单卡布局生成器，然后您将获得一个类似于交换卡小部件的Tinder（探探）！ 使用CardSwipeCompleteCallback获取滑动方向和索引！ 使用CardController从外部触发...
imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
weixin_35037351的博客
05-13 1065
项目说明> [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例。实现了消息发送、图片/视频预览、下拉刷新/长按弹窗、朋友圈等功能。技术架构运用技术：nuxt.js+vue.js+vuexUI组件库：vant (有赞移动端vue.js组件库)字体图标：阿里iconfont图标库弹窗组件：vpopup(基于vue自定义弹框...
类似陌陌.探探滑动切换图片
06-10
一个自定义的控件,搞定滑动图片切换图片的效果
Flutter-Swipe-:类似于Tinder的界面，用于选择“旅行目的地”
05-27
在Flutter中刷卡 该项目实现了扑打中的Tinder之类的刷卡功能。 我用这个漂亮的Ui显示了不同的Hill Station细节。 我们可以在点击卡的任何位置获取详细信息，这将使我们进入下一页。 我们已经使用Stack小部件将卡片一张一张地排列。 并且，我们使用Draggable属性来刷卡。 如果您喜欢我的作品，请给个星星。 谢谢 ！！ 入门 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
flutter_pickers：flutter选择器库，包括日期和时间选择器（可设置范围），单项选择器（可用于性别，民族，学历，星座，年龄，身高，体重，温度等），城市地址选择器（分省）级，地级及县级），多个选择器等……欢迎Fork＆pr贡献您的代码，大家共同学习
02-10
flutter_pickers 文档语言： | flutter选择器库，包括日期和时间选择器（可设置范围），单项选择器（可用于性别，民族，学历，星座，年龄，身高，体重，温度等），城市地址选择器（分省级，地级及县级），多个选择器等……欢迎Fork＆pr贡献您的代码，大家共同学习 例 用法 1.依赖 dependencies : flutter_pickers : ^1.0.0 2.获取 $ flutter packages get 3.安装 import 'package:flutter_pickers/pickers.dart' ; 目录 地址选择器 Pickers.showAddressPicker（） 支持三级联动 支持自定义颜色，大小等样式 支持显示'全部'选项 支持只选择省市2级 支持查询城市码 实时最高 三级选择器动图 二级静态图 简单使用 String in
探探(百合网,珍爱网)卡片左右滑动效果，滑动流畅，卡片view无限重生探探(百合网,珍爱网)卡片左右滑动效果(elipse版本的)
02-16
探探(百合网,珍爱网)卡片左右滑动效果，滑动流畅，卡片view无限重生,这个是elipse版本的,具体效果图 http://blog.csdn.net/qq_21036939/article/details/50673900
仿探探源码（加注释）
05-25
一个仿探探头像编辑的源码。对（http://www.apkbus.com/forum.php?mod=viewthread&tid=255164&highlight=%E6%8E%A2%E6%8E%A2）源码添加了注释。
Flutter右滑左滑/喜欢or不喜欢插件Drag_like
panyuancc的博客
02-01 1012
Flutter右滑左滑/喜欢or不喜欢插件Drag_likedrag_like注意事项待实现安装效果图使用方法回调方法onOutCompleteonScaleCompleteonChangeDragDistanceonPointerUp 仓库地址：https://github.com/ihongwu/DragLike 插件安装：https://pub.dev/packages/drag_like drag_like Flutter左滑右滑/喜欢、不喜欢的特效插件 支持划出事件回调，通知上层是左边划出还是右
仿探探_
FH_94的博客
11-21 1015
compile 'com.github.bumptech.glide:glide:3.8.0' compile project(':library') 布局：主布局 <FrameLayout android:layout_width="match_parent" android:layout_height="50dp" andro
仿探探图片卡左右滑动效果
xy8199的博客
12-14 2600
效果图： 1、实现如图效果 2、根据接口请求数据并展示 3、实现如效果视频的切换效果 4、换一批 可以切换随机切换一批电影数据 添加依赖： 项目的build.gradle   allprojects { repositories { jcenter() maven { url 'https://jitpack.io' } } }...
viewpage 去掉左右切换效果_flutter PageView实现左右滑动切换视图
06-06
好的，针对你的问题，我可以给出以下方案： 在Flutter中，如果想要去掉PageView的左右切换效果，可以通过PageView的构造函数中的`PageView.builder`来实现。具体步骤如下： 1. 首先，在PageView中添加`physics`属性，将其设置为`NeverScrollableScrollPhysics()`。这将禁用PageView的滚动功能。 2. 其次，在PageView的构造函数中，使用`PageView.builder`构造函数来创建PageView，同时设置`scrollDirection`属性为`Axis.horizontal`，`pageSnapping`属性为`false`，`controller`属性为一个`PageController`，`itemCount`属性为PageView中所有页面的数量。 3. 然后，在`PageView.builder`的`itemBuilder`参数中，返回每个页面的Widget，并在`PageController`中使用`jumpToPage`方法来实现页面切换。 下面是示例代码： ```dart PageView( physics: NeverScrollableScrollPhysics(), scrollDirection: Axis.horizontal, pageSnapping: false, controller: PageController(), itemCount: 3, itemBuilder: (BuildContext context, int index) { return Container( child: Center( child: Text( 'Page ${index + 1}', style: TextStyle(fontSize: 32.0), ), ), ); }, ); ``` 这样就可以实现一个没有左右切换效果的PageView了。希望这能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值