【Flutter】官方拖动排序组件(ReorderableListView),如何自定义拖动问题

一、起因

今天看到一个帖子。这个哥们使用官方的拖动列表组件 ReorderableListView的时候,不想要默认的长按触发拖动,而是想要列表项任意内部一个组件触发拖动。结果他找了半天,去把官方源码拎了一份出来,该源码去了....

故此,这篇文章诞生了。

二、ReorderableListView 的官方例子

api.flutter.dev/flutter/mat...

我们可以看到官方的代码很简单,而且不是通过长按列表项进行拖动,而是通过拖动图标进行拖动的。但是官方例子没有地方绘制拖动图标的地方,这就给人很多误解了...

然后我们找到源码的构造函数,发现其中有这么一个属性。

追踪一下这个属性就会发现正确的做法了:

官方注释的意思表达的很明确: 当:buildDefaultDragHandles为 true的时候,将启动内置拖动操作,而这个操作在 桌面端 上是显示了一个拖动图标,但是在移动端是通过长按进行拖动操作。如果想要自定义自己的拖动方式,需要将该值设为 false,然后在你需要拖动的小组件外使用ReorderableDragStartListener进行自定义。

这样就简单多了,我们来看一下正确做法。

三、正确操作

  1. buildDefaultDragHandles 设置为 false
  2. ReorderableDragStartListener 包裹需要拖动的组件
dart 复制代码
ReorderableListView.builder(
  itemCount: list.length,
  scrollDirection: Axis.vertical,
  //重点 1: 关闭默认的操作
  buildDefaultDragHandles: false,
  itemBuilder: (context, index) {
    final item = list[index];
    return Card(
      // 需注意:ReorderableListView构建项需要一个key作为唯一键。可以用 ValueKey.
      key: ObjectKey(item),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text("内容 $index"),
            // 重点 2:在需要拖动的小组件外使用这个包裹。
            ReorderableDragStartListener(
              index: index,
              child: const Icon(Icons.drag_handle_rounded),
            ),
          ],
        ),
      ),
    );
  },
  onReorder: (int oldIndex, int newIndex) {
    logger.d("新的旧的 index: $newIndex  $oldIndex");
    ///自己的排序方法
  },
)

bye~

相关推荐
哆啦A梦15881 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_1 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15883 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫3 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo3 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li3 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
LinXunFeng4 小时前
Flutter webview 崩溃率上升怎么办?我的分析与解决方案
flutter·ios·webview
浪裡遊5 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz6 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom6 小时前
iframe实战:跨域通信与安全隔离
前端·安全