Flutter自定义可拖动组件

推荐一个简单实用的可拖拽的 GridView 组件 在我们日常开发中,使用GridView这种网格视图的场合还是不少的,比如照片墙、九宫格等等。有一个场景就是需要对网格的元素进行拖拽排序,这个时候 Flutter 自带的GridView就无法满足了。本篇我们来介绍一个支持拖拽的GridView组件,可以轻松搞定网格视图的拖拽排序,这个组件就是。本篇向大家推荐了一款简单实用的可拖拽GridView组件,基本上可以满足我们大部分支持拖拽的网格视图应用。大家如果有用过类似的组件,也欢迎在评论区推荐一下。 阅读详情

在这里插入图片描述

 WidgetsBinding.instance.addPostFrameCallback((_) async {
      Overlay.of(context)?.insert(_entry());
    });
  OverlayEntry _entry() {
    return OverlayEntry(builder: (ctx) {
      return DraggableComponentOrderStatuWidget(
          Offset(ctx.width - 100, ctx.height / 3));
    });
  }
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:upower/common/style/common_style.dart';

class DraggableComponentOrderStatuWidget extends StatefulWidget {
  DraggableComponentOrderStatuWidget(this.offsetParam, {super.key});

  Offset offsetParam;

  @override
  State<DraggableComponentOrderStatuWidget> createState() =>
      _DraggableComponentOrderStatuWidgetState();
}

class _DraggableComponentOrderStatuWidgetState
    extends State<DraggableComponentOrderStatuWidget> {
  Offset? _offset;

  Widget _getContentWidget() {
    return Container(
      alignment: Alignment.center,
      width: 100,
      height: 30,
      decoration: const BoxDecoration(
        color: ColorStyle.primaryC2,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15), bottomLeft: Radius.circular(15)),
      ),
      child: Text(
        "租赁中",
        style: TextStyle(
            fontSize: 12.sp,
            color: Colors.white,
            decoration: TextDecoration.none),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _offset = widget.offsetParam;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          right: 0,
          top: _offset?.dy,
          child: Draggable(
            feedback: _getContentWidget(),
            childWhenDragging: Text(""), // 设置为null以隐藏原始小部件
            onDraggableCanceled: (velocity, offset) {
              setState(() {
                _offset = offset;
              });
            },
            child: _getContentWidget(),
          ),
        ),
      ],
    );
  }
}

如何在 Flutter 中实现可拖动的底部弹出框 是一个支持手势拖动和动画效果的底部弹出框组件。手势下拉关闭:用户可以通过向下拖动来关闭底部弹出框。动画弹出收起:支持平滑的动画效果,弹出或收起时更加自然。弹出后无法关闭:在特定场景下,弹出框可以设置为无法通过手势关闭。 阅读详情

相关推荐

设计美观的Flutter圆形颜色选择器教程及代码

Dart是基于类的面向对象语言。每个类都是一个对象,任何类都继承自Object类。类可以包含数据成员、方法、构造函数和其他类成员。int age;// 命名构造函数// 使用对象调用方法Person类有两个数据成员name和age,一个构造函数,和一个方法introduce。通过构造函数创建Person类的实例alice,然后使用该实例调用introduce方法。自定义平台通道需要分别在Dart端和原生端进行开发。

weixin_42509720的博客 1114

flutter 拖拽布局_使用Flutter模仿SOUL可任意拖动的悬浮按钮

在Flutter中,我们可以两种方式实现小部件对拖动效果GestureDetector()Draggable()GestureDetector在开发过程中经常使用到GestureDetector的onTap的点击手势,在编辑器中点击GestureDetector进入它的定义可以看到很多手势,但在实现我们想要的拖动效果时,只需要用到以下两个事件:GestureDetector(//更新child的位...

weixin_39980929的博客 1222

代码实现 —— 基于 STM32 的可见光通信系统课程设计

基于STM32F103ZET6,源码如需移植,需要修改定时器捕获通道引脚,及定时器,如果你也有这个课设任务,希望对你有所帮助。

不善挽留 1万+

Flutter:功能型组件(3)- 拖拽组件、缩放平移组件

Flutter:功能型组件(3)- 拖拽组件、缩放平移组件

weixin_41897680的博客 3827

在VM虚拟机的MobaXterm下安装JDK17

本文介绍了在Linux系统下安装配置JDK17的完整步骤:1)从Oracle或OpenJDK官网下载Linux版JDK17压缩包;2)上传至/usr/local目录;3)解压安装包;4)通过编辑/etc/profile文件配置环境变量,添加JAVA_HOME和PATH路径;5)使用source命令使配置生效;6)通过javac -version验证安装是否成功。整个过程涵盖了从下载到环境配置的完整流程,确保Java开发环境正确设置。

qq_2937655951的博客 442

图像去噪实战:Noise2Noise与Noise2Void在医学影像中的应用(附代码)

本文深入探讨了Noise2Noise与Noise2Void在医学影像去噪中的革命性应用,通过自监督学习技术有效解决临床数据配对难题。文章提供详细的代码实现和临床部署方案,展示如何提升低剂量CT、MRI等影像的诊断质量,特别适用于辐射敏感场景和急诊快速处理。

weixin_29092579的博客 241

Flutter 桌面探索 | 自定义可拖拽导航栏

上一篇介绍了官方的桌面导航,但整体灵活性并不是太好,风格我也不是很喜欢。看到飞书桌面端的导航栏可以支持拖拽排序,感觉挺有意思。而且排序之后,下次进入时会使用该顺序,而且在其他设备上也会同步该配置顺序。这说明用户登录时会从服务器获取配置信息,作为导航栏的状态数据决定显示。本文我们将来探讨两个问题:首先,我们先来对整体结构进行一下静态布局,也就是先抛开交互逻辑,对整体结构进行一下划分。整体是一个 上下 结构,下方是 导航栏 + 内容 的左右结构:下面是对静态界面结构的简单仿写,本文主要介绍导航栏的交互实现,其他

大模型训练 2335

STM32:TTL串口调试

TTL只需要两个线就可以完成两个设备之间的双向通信,一个发送电平的I/O称之为TX,与另一个设备的接收I/O口RX相互连接。两设备之间还需要连接地线(GND),这样两设备就有相同的0V参考电势。

superSmart_Dong的博客 5638

Flutter使用Draggable与自定义RenderObject实现图片添加标签,随意拖动位置效果

实现的效果图如下

上辈子作恶多端,这辈子写前端。 1342

Autosar软件组件分析及ARXML文件分析

Autosar软件组件分析及ARXML文件分析

专注汽车软件开发、AutoSAR、车载以太网、SOA、EE架构。 3601

2025小红书爬虫还能活?破解x-s签名+动态Cookie,亲测爬1000条笔记零封禁(附逆向全过程)

上周帮美妆行业的朋友爬小红书“口红推荐”笔记,刚发30个请求就被403,抓包一看x-s签名不对;换Cookie继续爬,爬50条又被封——小红书的反爬这两年简直是“地狱模式”:动态Cookie每10分钟过期,x-s签名算法季度更新,连请求头的User-Agent顺序错了都会被拦。。这篇文章不藏私,把逆向x-s签名的全过程、动态Cookie的维护技巧、1000条稳定爬取的实战代码全给你,连我踩过的8个坑都标出来了(最后附代理池配置,IP零封禁的关键)。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 7405

Flutter拖拽控件Draggable

Draggable 最近做了一个Flutter项目,其中有一个需求是做出三个可以互相拖拽的任务列表,平时在做Android项目时,拖动的控件基本上都是自定义View来实现的,想看看在Fluter上大家都是怎么实现的,没想到flutter提供了一个非常方便的拖拽控件Draggable。 Draggable的构造函数 我个人在Flutter开发时,遇到没有见过的控件时,点开源码观察它的构造函数一定是了解它的功能的最优解,我们看Draggable的构造函数: const Draggable({ Key

E的博客 2599

CAM350常用快捷键

CAM350快捷键 CAM350常用快捷键

bhxc809751502的博客 3057

flutter的custompaint组件示例5

这段代码通过组合使用 Flutter 的各种组件和自定义画家,实现了一个具有特定功能的可拖动圆角矩形 UI 组件,展示了 Flutter 在自定义 UI 设计和交互方面的强大能力。主页内容是一个Scaffold,其中包含一个AppBar和一个名为DraggableCustomRoundedRectangle的自定义组件。paint方法中定义了画笔的颜色、样式和宽度,然后创建一个矩形和圆角矩形,并使用画布绘制这个圆角矩形。这段代码是一个简单的Flutter应用程序,它创建了一个可拖动的自定义圆角矩形组件。

weixin_42668920的博客 473

虚幻商城 蓝图汇总

虚幻引擎是一个非常强大和灵活的游戏开发工具,拥有众多的蓝图可以帮助我们更高效地工作。

一碗清深的博客 1507

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

玩玩Flutter的拖拽——实现一款万能遥控器

前阵子突然想到两年前写过的一篇博客:玩玩Android的拖拽——实现一款万能遥控器,就想着用Flutter来复刻一下。顺便练习一下Flutter里的拖拽Widget。

唯鹿的博客 7160

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

Flutter Key的原理和使用(五) 需要key的实例:可拖动改变顺序的Listview

Flutter Key的原理和使用(一) 没有Key会发生什么 Flutter Key的原理和使用(二) Widget 和 Element 的对应关系 Flutter Key的原理和使用(三) LocalKey的三种类型 Flutter Key的原理和使用(四) GlobalKey 的用法 之前呢,我们介绍了flutter中的几种key,它们相应的原理和使用方式, 这次就来复习一下,看看一个需要用到key的实例. ReorderableListView 你可能使用过ListView组件,它可以调整,显示和滚

卓原的进化之旅 2192

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

Flutter ShowModalBottomSheet 自定义高度和滚动

这是一个官方的组件 但是两个滑动在一起会有冲突简单的实现了一下滑动到头自动收起这个组件。

Dream It Possible 3578

Flutter 自定义 进度拖动控件

代码如下: import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:wenshushu/style/wenshushu_style.dart'; class SeekToView extends StatefulWidget { final Functio...

qin19930929的博客 1870

Flutter Draggable Scrollbar:实现可拖动滚动条的开源项目

Flutter Draggable Scrollbar:实现可拖动滚动条的开源项目 一、项目基础介绍 Flutter Draggable Scrollbar 是一个基于 Flutter 框架的开源项目,主要使用 Dart 语言开发。该项目提供了一种可拖动的滚动条组件,使得用户可以更快速地导航和浏览长列表。 二、项目核心功能 可拖动的滚动条:用户可以通过拖动滚动条快速导航列表,提升了用户体验。 自...

gitblog_00623的博客 887

flutter 实现一个两个按钮的平滑的slider

import 'package:flutter/material.dart'; import 'package:fuligou/base/BaseWidget.dart'; import 'package:fuligou/util/HttpUtils1.dart'; import 'package:fuligou/util/HttpClient.dart'; import 'package:f...

825

flutter 拖拽布局_Flutter 拖拽组件案例实现

前言 :各位同学的大家好 ,有段时间没有给大家更新文章了,最近写了一个flutter 中拖拽组件的案例实现, 分享给大家,希望能帮助到各位同学学习和工作 ,那么废话不多说我们正式开始。准备工作:需要安装flutter的开发环境:大家可以去看看之前的教程:1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc87182 mac系统flut...

weixin_29491655的博客 835

flutter 拖拽布局_flutter上拉抽屉效果 flutter拖动抽屉效果-阿里云开发者社区

题记—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。重要消息示例一示例二1、 抽屉关闭状态时点击标签抽屉会向上打开,也可配置关闭这个功能;2、 抽屉关闭状态时,向上滑动,滑动过一定的高度时自动向上滑动打开,当没有滑动过一定的高度时,自动向下滑动,呈关闭状态;3、 抽屉打开状态时,当滑动视图处于顶部时,向下滑动,抽屉自动向下滑动关闭,可配置形状是否开启这...

weixin_29016833的博客 439

Flutter | WReorderList 一个可以指定两个item互换位置的组件

最近遇到个需求,要求在一个 ListView 里面能互换两个 item 的位置,这样:于是,就有了现在的这个WReorderList。WReorderList功能就不用...

Flutter笔记 1866

flutter 强烈安利轮子

flutter好用轮子整理:

iamzhizhang的博客 884
上一篇: Flutter 项目结构文件
下一篇: Swifit学习第一天
黄毛火烧雪下
黄毛火烧雪下 领域专家: 操作系统技术领域 领域专家: 操作系统技术领域
博客等级 码龄14年 7714粉丝 439原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄毛火烧雪下

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值