Flutter Widget 之Draggable

有很多UI模式涉及拖动，例如在电子邮件中移动地址，或将文档从一个文件夹移动到另一个文件夹

如果您有希望用户拖动的widget，请尝试使用Draggable。

Draggable具有保存它们所代表的数据的属性。

因此，最好从类型参数开始，接下来，添加数据本身并定义Draggable的外观

当Draggable在等待时，将使用子项属性

Draggable<Color> (
    data: Color(0x000000ff),
    child: MyBlueBox(),
)

拖动widget时，将替换拖动时的可选子项

Draggable<Color> (
    data: Color(0x000000ff),
    child: MyBlueBox(),
    childWhenDragging: MyRoundedBlueBox(),
)

剩下的是可选的feedback widget

Draggable<Color> (
    data: Color(0x000000ff),
    child: MyBlueBox(),
    childWhenDragging: MyRoundedBlueBox(),
    feedback: MyGrayBox(),
)

widget被拖动后会在哪里着陆？

你可能说，在拖动目标上。拖动目标是Draggable的着陆区

它们具有用于处理数据的三个功能属性

调用onWillAccept来测试拖动目标是否将接受Draggable的数据

有效的Draggable着陆时将调用onAccept

每当将Draggable拖动到目标上然后离开时就会调用onLeave

使用builder属性来定义要拖动到的目标值的构成方式

DragTarget<Color>(
    onWillAccept: (value) => value != Colors.black,
    onAccept(value) {
        //Update app state with value.
    },
    onLeave: (value) {
        // Alert the user their value didn't land
    },
    builder: (context, candidates, rejects) {
        return candidates.length > 0
            ? MyBigColorfulBox(candidates[0])
            : MyDashedOutline();
    }
)

如果想了解有关Draggable的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址