使用Flutter模仿SOUL可任意拖动的悬浮按钮

最新推荐文章于 2024-03-30 05:19:43 发布
VIP文章 最新推荐文章于 2024-03-30 05:19:43 发布
阅读量6.6k 收藏 9
点赞数 1
分类专栏： Flutter开发实践 文章标签： Flutter 悬浮 Widget SOUL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010972075/article/details/88994492
版权

在Flutter中，我们可以两种方式实现小部件对拖动效果

  • GestureDetector()
  • Draggable()

GestureDetector

在开发过程中经常使用到GestureDetector的onTap的点击手势，在编辑器中点击GestureDetector进入它的定义可以看到很多手势，但在实现我们想要的拖动效果时，只需要用到以下两个事件：

GestureDetector(
	//更新child的位置
	onPanUpdate: (details) {
   },
	//拖动结束，处理child贴边悬浮
	onPanEnd: (details) {
   },
	//悬浮部件布局
	child:
最低0.47元/天 解锁文章
Coding24h
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
仿soul微信小程序源码
11-09
源码有点大，大概80多MB，这款版本据说价值2000，但是因为搭建太麻烦了，没有去研究如何搭建，所以源码是没有任何视频搭建教程的，只有一个简单的文本教程，有需要的可以自行研究如何搭建这款源码，源码不提供任何技术支持。
抽奖H5仿soul首页星球旋转，可以自定义奖品名单，可以改成自定义中奖数量，中奖弹窗和中奖记录，只能中奖一次中奖后颜色变化，重置
01-05
抽奖H5仿soul首页星球旋转，可以自定义奖品名单，可以改成自定义中奖数量，中奖弹窗和中奖记录，获奖名单是多次获奖的记录，只能中奖一次中奖后颜色变化，清空重置中过奖的
Flutter 底部浮动按钮(模仿咸鱼APP底部)，阿里技术专家深入讲解
最新发布
m0_63174811的博客
03-30 1104
更多学习和讨论，欢迎加入我们！有许多来自一线的技术大牛，也有在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。这里有2000+小伙伴，让你的学习不寂寞~·讨论，欢迎加入我们！有许多来自一线的技术大牛，也有在小厂或外包公司奋斗的码农，我们致力打造一个平等，高质量的Android交流圈子，不一定能短期就让每个人的技术突飞猛进，但从长远来说，眼光，格局，长远发展的方向才是最重要的。
用CSS3 做的星体
lumot的博客
09-12 157
制作原理：在我的上一篇随笔中有详细的说明，由于这个方法制作的球，比较耗性能，就只做了3个小球，效果大家可以试验。 <!DOCTYPE html> <html> <head lang="en"> <...
Android开发-仿Soul社交应用首页3D星球视图旋转样式
_彼岸雨敲窗_的博客
08-17 6778
前 言 前段时间在Soul应用 创建一个表格 一个简单的表格是这么创建的： 项目 Value 电脑 $1600 手机 $12 导管 $1 界面运行效果图如下： apk安装包下载体验地址： 可以扫描以下二维码进行下载安装，或者点击以下链接 http://app.fukaimei.top/tcpush 进行下载安装体验。 ———————— The end ———————— 码字不易，如果您觉得这篇博客写的比较好的话，可以赞赏一杯咖啡吧~~ Demo程序源码下载地址一（Git
仿soul 3d 星球
sunlight_01的博客
04-25 955
<template> <div class="tagBall"> <a class="tag" target="_blank" rel="external nofollow" :style="getStyle(item)" v-for="(item, index) in nameList" :key="index" >{{item.wordName}}</a> </div> </template> <...
SoulPlanet:Soul App星球效果
05-11
Soul Planet Soul App星球效果 效果图 感谢 基于，修改部分代码实现
Flutter 悬浮球
qq_42167096的博客
07-30 1809
Flutter 悬浮球 这是悬浮球代码 import 'package:flutter/material.dart'; import 'package:day_dream/business/main/views/subpage/subsubpage/main_recommend_city.dart'; //import 'package:day_dream/business/main/views/MapScreen.dart'; class Drag extends StatefulWidget {
flutter星球实现
zqwily的博客
08-17 389
添加链接描述
全局悬浮球
11-04
全局悬浮球的实现，比如桌面清理内存的悬浮球。
flutter初学之悬浮按钮
M1512415的博客
06-30 2460
初学篇
Flutter任意拖动的悬浮按钮
06-17
Flutter任意拖动的悬浮按钮，可以更改参数设定边界范围， 内包含多个Demo 仓库地址 https://github.com/ihongka/FlutterDIY
MediumClapFlutter一个自定义浮动操作按钮FAB类似于Medium中的拍手效果
08-10
MediumClapFlutter一个自定义浮动操作按钮FAB类似于Medium中的拍手效果
flutter全局悬浮按钮方法及代码.docx
08-26
lutter全局悬浮按钮方法及代码
TikTokGestures使用Flutter模仿TikTok中的手势交互效果
08-07
TikTok_Gestures：使用Flutter模仿TikTok中的手势交互效果
flutter实现可缩放可拖拽双击放大的图片功能
08-10
flutter - 实现可缩放可拖拽双击放大的图片功能
Flutter 滚动悬浮导航栏TabBar
02-11
Flutter TabBar SliverAppBar PageView NestedScrollView
小程序仿soul星球
转身浮生
12-13 989
下面展示一些内联代码片。
Android实现SoulApp星球效果
u012582497的博客
05-20 7647
SoulApp的星球看起来太炫酷了！！！ 啥也不说先上图： Github传送门 biu biu biu ~~~ 基础知识 首先得拿出我们的数学知识： 球坐标系(r,θ,φ)与直角坐标系(x,y,z)的转换关系: x = rsinθcosφ. y = rsinθsinφ. z = rcosθ. Q：What！为什么要整个球坐标系啊？ A：因为星球嘛，位置信息当然球坐标系更加简单额。 实现...
Flutter 悬浮按钮
05-18
Flutter 中的悬浮按钮可以通过 `FloatingActionButton` Widget 来实现。以下是一个基本的示例： ```dart FloatingActionButton( onPressed: () { // 点击按钮后执行的代码 }, child: Icon(Icons.add), ) ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值