当前版本 Flutter 3.19.5

Draggable API

构造函数

实现

const Draggable<T extends Object?>(
  {
    Key? key,
    required Widget child,
    required Widget feedback,
    T? data,
    Axis? axis,
    Widget? childWhenDragging,
    Offset feedbackOffset = Offset.zero,
    DragAnchorStrategy dragAnchorStrategy = childDragAnchorStrategy,
    Axis? affinity,
    int? maxSimultaneousDrags,
    VoidCallback? onDragStarted,
    DragUpdateCallback? onDragUpdate,
    DraggableCanceledCallback? onDraggableCanceled,
    DragEndCallback? onDragEnd,
    VoidCallback? onDragCompleted,
    bool ignoringFeedbackSemantics = true,
    bool ignoringFeedbackPointer = true,
    bool rootOverlay = false,
    HitTestBehavior hitTestBehavior = HitTestBehavior.deferToChild,
    AllowedButtonsFilter? allowedButtonsFilter
  }
)

属性

child

拖拽的组件。

实现

Widget child,

feedback

拖动时显示的组件

实现

Widget feedback

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: Text("Dragging"),
),

data

控件携带的数据,一般提供给DragTarget

实现

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: Text("Dragging"),
  data: "Draggable数据",
),

axis

对滑动的方向做限制（横向或者纵向）

实现

Axis? axis

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: Text("Dragging"),
  axis: Axis.vertical,
),

childWhenDragging

多点触控拖动时显示的组件

实现

Widget? childWhenDragging

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: Text("Dragging"),
  childWhenDragging: FlutterLogo(size: 50),
),

feedbackOffset

用来设置 DragTarget 接收响应的偏移位置，默认（0，0），是从 DragTarget 的右下角开始

实现

Offset feedbackOffset

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  feedbackOffset: Offset(0, -50),
),

dragAnchorStrategy

开始拖动时feedback显示的位置

childDragAnchorStrategy: 原child位置

pointerDragAnchorStrategy: 触摸的位置

实现

DragAnchorStrategy dragAnchorStrategy

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  dragAnchorStrategy: pointerDragAnchorStrategy,
),

affinity

让Draggable可以共享垂直或水平方向上的滑动事件（例如拖动同时滚动Scrollable）

实现

Axis? affinity

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  affinity: Axis.vertical,
),

maxSimultaneousDrags

多点触控时最大响应数

实现

int? maxSimultaneousDrags

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  maxSimultaneousDrags: 1,
),

onDragStarted

开始拖动时的回调

实现

void Function()

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  onDragStarted: () {
    print("onDragStarted");
  },
),

onDraggableCanceled

未拖动到DragTarget控件上时回调

实现

DraggableCanceledCallback = void Function(
  Velocity velocity,
  Offset offset
)

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  onDraggableCanceled: (Velocity velocity, Offset offset) {
    print("onDraggableCanceled");
  },
),

onDragUpdate

拖动时的回调

实现

DragUpdateCallback = void Function(
  DragUpdateDetails details
)

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  onDragUpdate: (DragUpdateDetails details) {
    print("onDragUpdate");
  },
),

onDragEnd

拖动结束时的回调

实现

DragEndCallback = void Function(
  DragEndDetails details
)

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  onDragEnd: (DragEndDetails details) {
    print("onDragEnd");
  },
),

onDragCompleted

拖动结束时的回调

实现

VoidCallback = void Function()

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  onDragCompleted: () {
    print("onDragCompleted");
  },
),

ignoringFeedbackSemantics

是否忽略feedback的语义

实现

bool ignoringFeedbackSemantics = true

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  ignoringFeedbackSemantics: false,
),

ignoringFeedbackPointer

是否忽略feedback的指针

实现

bool ignoringFeedbackPointer = true

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  ignoringFeedbackPointer: false,
),

rootOverlay

是否是根层

实现

bool rootOverlay = false

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  rootOverlay: true,
),

hitTestBehavior

拖动时在命中测试期间如何表现

实现

HitTestBehavior hitTestBehavior = HitTestBehavior.deferToChild

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  hitTestBehavior: HitTestBehavior.translucent,
),

allowedButtonsFilter

允许拖动的按钮

实现

AllowedButtonsFilter? allowedButtonsFilter

示例

Draggable(
  child: FlutterLogo(size: 100),
  feedback: FlutterLogo(size: 100),
  allowedButtonsFilter: [
    PointerDeviceKind.mouse
  ],
),