本文记录实现如何使用
ReorderableListView实现列表项的某个子组件点击直接进行拖拽，去除默认的长按整个列表项实现拖拽的默认行为。
Flutter官方提供了ReorderableListView组件用于实现列表的拖拽排序功能，但根据移动端实际使用效果发现，拖拽的触发限制在整个item的长按点击拖拽事件上，有时候需要根据产品需求，需要自定义item上的某个button点击后直接拖拽，这时，就需要看看能不能通过其他方式实现。
- 其构造函数未提供相关设置
ReorderableListView({
Key? key,
required List children,
required this.onReorder,
this.proxyDecorator,
this.buildDefaultDragHandles = true,
this.padding,
this.header,
this.scrollDirection = Axis.vertical,
this.reverse = false,
this.scrollController,
this.primary,
this.physics,
this.shrinkWrap = false,
this.anchor = 0.0,
this.cacheExtent,
this.dragStartBehavior = DragStartBehavior.start,
this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
this.restorationId,
this.clipBehavior = Clip.hardEdge,
})
- 查看其itemBuilder函数实现
Widget _itemBuilder(BuildContext context, int index) {
final Widget item = widget.itemBuilder(context, index);
assert(() {
if (item.key == null) {
throw FlutterError(
'Every item of ReorderableListView must have a key.',
);
}
return true;
}());
// TODO(goderbauer): The semantics stuff should probably happen inside
// _ReorderableItem so the widget versions can have them as well.
final Widget itemWithSemantics = _wrapWithSemantics(item, index);
final Key itemGlobalKey = _ReorderableListViewChildGlobalKey(item.key!, this);
if (widget.buildDefaultDragHandles) {
switch (Theme.of(context).platform) {
case TargetPlatform.fuchsia:
case TargetPlatform.linux:
case TargetPlatform.windows:
case TargetPlatform.macOS:
switch (widget.scrollDirection) {
case Axis.horizontal:
return Stack(
key: itemGlobalKey,
children: [
itemWithSemantics,
Positioned.directional(
textDirection: Directionality.of(context),
start: 0,
end: 0,
bottom: 8,
child: Align(
alignment: AlignmentDirectional.bottomCenter,
child: ReorderableDragStartListener(
index: index,
child: const Icon(Icons.drag_handle),
),
),
),
],
);
case Axis.vertical:
return Stack(
key: itemGlobalKey,
children: [
itemWithSemantics,
Positioned.directional(
textDirection: Directionality.of(context),
top: 0,
bottom: 0,
end: 8,
child: Align(
alignment: AlignmentDirectional.centerEnd,
child: ReorderableDragStartListener(
index: index,
child: const Icon(Icons.drag_handle),
),
),
),
],
);
}
case TargetPlatform.iOS:
case TargetPlatform.android:
return ReorderableDelayedDragStartListener(
key: itemGlobalKey,
index: index,
child: itemWithSemantics,
);
}
}
return KeyedSubtree(
key: itemGlobalKey,
child: itemWithSemantics,
);
}
发现基于iOS、Android平台做了区分，使用了ReorderableDelayedDragStartListener这个组件进行包裹。
根据其字面意思，可以知道它的作用就是点击延迟拖拽触发器。
再看看PC平台的实现，发现pc端的实现符合我们的需求，将拖拽触发事件放在了一个icon上。
但却无法直接重写该函数，那只能重写整个类了，可以创建ReorderableListView2类，复制原类的内容，重写_itemBuilder中关于Android、iOS中的实现，这样我们完全可以去除默认的拖拽触发行为并且自定义拖拽按钮的放置位置。
这里提供一个简单的实现，直接将case iOS case Android移动到pc分支下即可。
Widget _itemBuilder(BuildContext context, int index) {
final Widget item = widget.itemBuilder(context, index);
assert(() {
if (item.key == null) {
throw FlutterError(
'Every item of ReorderableListView must have a key.',
);
}
return true;
}());
// TODO(goderbauer): The semantics stuff should probably happen inside
// _ReorderableItem so the widget versions can have them as well.
final Widget itemWithSemantics = _wrapWithSemantics(item, index);
final Key itemGlobalKey = _ReorderableListViewChildGlobalKey(item.key!, this);
if (widget.buildDefaultDragHandles) {
switch (Theme.of(context).platform) {
case TargetPlatform.fuchsia:
case TargetPlatform.linux:
case TargetPlatform.windows:
case TargetPlatform.macOS:
case TargetPlatform.iOS:
case TargetPlatform.android:
switch (widget.scrollDirection) {
case Axis.horizontal:
return Stack(
key: itemGlobalKey,
children: [
itemWithSemantics,
Positioned.directional(
textDirection: Directionality.of(context),
start: 0,
end: 0,
bottom: 8,
child: Align(
alignment: AlignmentDirectional.bottomCenter,
child: ReorderableDragStartListener(
index: index,
child: const Icon(Icons.drag_handle),
),
),
),
],
);
case Axis.vertical:
return Stack(
key: itemGlobalKey,
children: [
itemWithSemantics,
Positioned.directional(
textDirection: Directionality.of(context),
top: 0,
bottom: 0,
end: 8,
child: Align(
alignment: AlignmentDirectional.centerEnd,
child: ReorderableDragStartListener(
index: index,
child: const Icon(Icons.drag_handle),
),
),
),
],
);
}
//case TargetPlatform.iOS:
//case TargetPlatform.android:
//return ReorderableDelayedDragStartListener(
//key: itemGlobalKey,
//index: index,
//child: itemWithSemantics,
//);
}
}
return KeyedSubtree(
key: itemGlobalKey,
child: itemWithSemantics,
);
}