【Flutter 问题系列第 79 篇】在 Flutter 中使用 ReorderableListView 实现拖拽排序列表组件的功能

已于 2024-07-23 16:52:00 修改
阅读量2.3k 收藏 6
点赞数 12
分类专栏： Flutter 常见问题 文章标签： ReorderableList Flutter拖拽排序列表组件 Flutter中的拖拽排序功能
于 2023-10-24 10:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42351033/article/details/133987522
版权
本文详细解读了Flutter中的ReorderableListView组件，介绍了其源码结构，必需和可选属性，以及如何使用和定制拖拽行为。重点讲解了如何仅允许用户通过特定区域（如图标）进行拖拽排序。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这是【Flutter 问题系列第 79 篇】，如果觉得有用的话，欢迎关注专栏。

当前开发环境
Flutter 版本：3.10.5，Dart 版本：3.0.5，操作系统：macOS

文章目录

一：效果演示

在 Flutter 中，实现拖动某一个组件可以使用 Draggable，比如实现悬浮球功能。

除了拖拽一个组件外，在很多 App 中都会有对某个列表中的组件进行拖拽排序的功能。比如添加某个分类后，然后对这些分类进行拖拽排序。

下面以排序动漫排名为案例，动态演示图的效果如下

了解本专栏 订阅专栏 解锁全文
《Flutter 控件大全》第七十五：ReorderableListView
老孟Flutter
04-04 1174
如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。 Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。 ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。...
Flutter 笔记 | Flutter 可滚动组件
川峰的博客
05-26 4696
Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚
flutter怎么对ReorderableListView中的用于排序的控制手柄进行显示或隐藏
dalaomanzou的博客
12-26 432
答案很简单，就是在它的属性当中有一个叫做：buildDefaultDragHandles的，只需要给它一个false，就可以将其隐藏，反之则会显示该控制手柄。控制手柄的图标为两根等长的横线。我在使用ReorderableListView创建可排序列表的时候，需要在编辑的时候才显示右侧的控制排序的手柄。研究了半天，配合搜索引擎，才找到正确的方案。
Flutter ：拖拽排序 ReorderableListView
青蛙不吃草
08-20 2827
ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。 使用：下面实现功能为：头部“新增收藏夹”不动，下面cell可以拖拽排序 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:trade_app/base/baseColor.dart'; import 'package:trade_app/base/baseSize.d.
【Flutter】在Flutter中实现长按拖拽排序？不要太轻松,Reorderables 开源项目介绍和源码分析（作者的思路挺鬼才的，我怎么想不到
2401_84538544的博客
05-10 884
这作者的操作确实让人开眼界，我当时还以为要通过OverLay之类的东西来搞，没想到其实实现方式没必要那么复杂，这不挺简单的嘛：国际惯例，效果图：下面就是搞搞这个的改造，加入那个文件夹功能；要想成为架构师，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。
Flutter 中的 ReorderableListView 小部件：全面指南
最新发布
smileKH的博客
05-18 1064
是Flutter的一个组件，它继承自ListView，因此具有所有ListView的特性，同时还增加了拖拽重新排序的功能。用户可以通过长按列表项并拖动到列表中的其他位置来改变项的顺序。// 更新列表顺序的逻辑},),
Flutter Key的原理和使用(五) 需要key的实例:可拖动改变顺序的Listview
卓原的进化之旅
09-07 1800
Flutter Key的原理和使用(一) 没有Key会发生什么 Flutter Key的原理和使用(二) Widget 和 Element 的对应关系 Flutter Key的原理和使用(三) LocalKey的三种类型 Flutter Key的原理和使用(四) GlobalKey 的用法 之前呢,我们介绍了flutter中的几种key,它们相应的原理和使用方式, 这次就来复习一下,看看一个需要用到key的实例. ReorderableListView 你可能使用过ListView组件,它可以调整,显示和滚
【Flutter】在Flutter中实现长按拖拽排序？不要太轻松,Reorderables 开源项目介绍和源码分析（作者的思路挺鬼才的，我怎么想不到）
xiaokangss的博客
06-06 3083
今天是复工的第一天，现在还是不太能接受假期就这么结束了，就当是一场梦，醒了很久还是很不能接受；回正题，这篇的主题在Flutter中实现拖拽排序可以怎么做；当然，flutter 中本身就带有 ReorderableListView 这个控件，不过如果需要对 GridView、瀑布流这种来做一个拖拽排序的话，flutter本身并没有类似 ReorderableGridView 这种东西；这时候就到了万能的 pub.dev 上场的时候了目前在pub上搜索reorder这个关键词，相关部分中，like最多的就是 [
flutter 组件学习之 ReorderableListView ，移动容器，重新排列。
qq_45099679的博客
03-30 1044
1. 话不多说，上效果。 如图所述 2. 代码如下 import 'package:flutter/material.dart'; class ReorderableListViewDemo extends StatefulWidget { @override _ReorderableListViewDemoState createState() => _Reorde...
Flutter中实现列表拖放功能的详细教程
在实现拖放功能时，为列表项分配唯一的Key是必要的，因为拖放操作依赖于这些唯一标识符来识别和处理被拖动的Widget。 ### Flutter中的Drag and Drop实现过程 实现Flutter列表的拖放功能主要包括以下步骤： - 创建...
flutter_reorderable_list:Flutter的ReorderableList
05-17
Flutter中的可重排序列表 类似于iOS的概念证明，带有动画的可重新排序列表 预习 入门 有关示例用法，请参见example/lib/main.dart 强调 与flutter的ReorderableListView不同 与条子一起使用，因此可以将其放置在CustomScrollView并与SliverAppBar一起SliverAppBar 支持大列表（数千个项目），没有任何问题 其他特性 平滑的重新排序动画 支持不同的物品高度 iOS喜欢通过拖动手柄重新排序 Android类（长按）重新排序 注意事项 没有API稳定性保证。 如果您使用的是先前版本的可重排序列表，请记住，现在需要将ReorderableListener放置在ReorderableItem层次结构中的某个ReorderableItem ，以便检测触摸并触发实际的重排序（请参见示例）。 或者，您可以将整个行包装在
flutter-draggable-scrollbar:可拖动的滚动条-可以拖动以快速浏览垂直列表的滚动条。 附加选项是在滚动缩略图旁边显示标签，其中包含有关当前项目的信息。 维护者
05-01
可拖动滚动条 可以拖动滚动条以快速浏览垂直列表。 另外，它可以在滚动缩略图旁边显示标签，其中包含有关当前项目的信息，例如创建图片的日期 用法 您可以使用三个内置滚动拇指之一，也可以为自己的应用程序创建自定义拇指！ 您可以通过运行example文件夹中找到的应用程序来处理所有这些示例。 例子 半圆拇指 DraggableScrollbar . semicircle ( controller : myScrollController, child : GridView . builder ( gridDelegate : SliverGridDelegateWithFixedCrossAxisCount ( crossAxisCount : 5 , ), controller : myScrollController, padding :
Flutter Image添加拖动排序，Image添加拖动排序，支持单击事件，删除，添加，长按拖动排序。-JavaScript开发
05-26
Flutter Image添加拖拽排序，Image添加拖拽排序，支持点击事件，删除，添加，长按拖拽排序，支持视频固定为首。 flutter_image_add_drag_sort Flutter图像添加拖动排序，图像添加拖动排序，支持单击事件，删除，添加，长按拖动排序，支持视频固定为首。 支持的平台Android IOS许可MIT许可证如何使用＃将以下行添加到依赖项中flutter_picker：git：git：//github.com/yangyxd/flutter_image_add_drag_sort.git import'package：flutter_image_add_drag_sort / flutter_image_add_drag_sort.dart'; 示例示例应用程序-演示如何使用t
Flutter ListView 拖拽排序了解一下
Flutter笔记
07-22 3461
前面我们对于ListView的操作讲过Flutter 滑动删除最佳实践，那现在我们来了解一下ListView的拖拽排序。效果如下：ReorderableList...
Flutter可重排的列表控件ReorderableListView详解
江上清风山间明月的博客
03-11 1316
ReorderableListView 是 Flutter 中一个可重排的列表控件，允许用户通过拖动来改变列表项的顺序。它继承自 ListView，并提供了一些额外的功能来实现重排功能。
flutter ReorderableListView 拖拽列表
python4_1的博客
12-28 855
ReorderableListView 拖拽列表 自定义拖拽区域
【Flutter】【ReorderableListView】有记忆的拖动list 元素
自动人生博客
09-26 437
【代码】【Flutter】【ReorderableListView】有记忆的拖动list 元素。
13、 Flutter Widgets 之 ReorderableListView拖拽排序组件
wywinstonwy的专栏
12-30 3893
ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。 ReorderableListView需要设置children和onReorder属性，children是子控件，onReorder是拖动完成后的回调，用法如下： List<String> items = List.generate(40, (int i) => '$i'); ReorderableListView( children: <Widget>[
flutter可以滚动控件之 ReorderableListView
Leove的专栏
04-03 399
flutter可以滚动控件之 ReorderableListView，可以实现元素间的拖动，但是在ListView中，这个比较耗费资源。 /// Flutter code sample for ReorderableListView import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); /// This is the main application widget. class MyApp
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Allen Su

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

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

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

打赏作者

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

抵扣说明：

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

余额充值