《Flutter Draggable和DragTarget：您的拖拽控件指南》

2023-10-18 18:35:52

Flutter Draggable和DragTarget拖拽控件简介

Flutter Draggable是一个可以响应手势拖动操作的Widget，用户可以将其拖动到其他地方，它可以被添加到任何其他Widget上，以便使其可拖动，而DragTarget则是一个可以接收Draggable的Widget，当Draggable被拖动到DragTarget时，它将触发DragTarget的onAccept回调函数。

使用Flutter Draggable和DragTarget构建拖拽应用

导入必要的库

import 'package:flutter/material.dart';

定义Draggable Widget

Draggable(
  child: Container(
    color: Colors.blue,
    width: 100,
    height: 100,
  ),
  feedback: Container(
    color: Colors.red,
    width: 100,
    height: 100,
  ),
);

定义DragTarget Widget

DragTarget<Widget>(
  onAccept: (Widget data) {
    // 当Draggable被拖动到DragTarget时触发
  },
  builder: (context, candidateData, rejectedData) {
    return Container(
      color: Colors.green,
      width: 100,
      height: 100,
    );
  },
);

组合Draggable和DragTarget Widget

Row(
  children: <Widget>[
    Draggable(
      child: Container(
        color: Colors.blue,
        width: 100,
        height: 100,
      ),
      feedback: Container(
        color: Colors.red,
        width: 100,
        height: 100,
      ),
    ),
    DragTarget<Widget>(
      onAccept: (Widget data) {
        // 当Draggable被拖动到DragTarget时触发
      },
      builder: (context, candidateData, rejectedData) {
        return Container(
          color: Colors.green,
          width: 100,
          height: 100,
        );
      },
    ),
  ],
);