Flutter交互基础之Draggable：玩转拖拽与数据传递

2024-01-24 13:52:05

在Flutter中，交互是至关重要的，它能提升用户体验，让你的应用更加生动有趣。Draggable就是Flutter中一个非常实用的交互控件，它允许用户拖拽一个Widget并将其放置到另一个Widget上，同时还可以传递数据。

Draggable的使用

使用Draggable非常简单，只需要将你想要拖拽的Widget包裹在一个Draggable中即可。同时，你需要指定一个onDragCompleted回调函数，用于处理拖拽完成后的操作。

Draggable(
  child: Container(
    color: Colors.blue,
    width: 100,
    height: 100,
  ),
  onDragCompleted: (details) {
    // 处理拖拽完成后的操作
  },
)

DragTarget的使用

为了接收被拖拽的Widget，我们需要使用DragTarget。DragTarget需要指定一个onAccept回调函数，用于处理接受拖拽数据后的操作。

DragTarget(
  onAccept: (data) {
    // 处理接收拖拽数据后的操作
  },
)

数据传递

Draggable和DragTarget之间可以通过data参数进行数据传递。在Draggable中，可以使用data属性指定要传递的数据。在DragTarget中，可以在onAccept回调函数中获取传递过来的数据。

Draggable(
  data: "Hello World",
  child: Container(
    color: Colors.blue,
    width: 100,
    height: 100,
  ),
  onDragCompleted: (details) {
    // 处理拖拽完成后的操作
  },
)

DragTarget(
  onAccept: (data) {
    // 接收到的数据为"Hello World"
  },
)

一个简单的例子

让我们通过一个简单的例子来演示如何使用Draggable和DragTarget。在这个例子中，我们将创建一个可以拖拽的方块，并将其放置到一个目标区域中，当方块被放置到目标区域后，目标区域会改变颜色。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Draggable Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color targetColor = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Draggable(
              child: Container(
                color: Colors.blue,
                width: 100,
                height: 100,
              ),
              data: "Hello World",
              onDragCompleted: (details) {
                setState(() {
                  targetColor = Colors.green;
                });
              },
            ),
            DragTarget(
              onAccept: (data) {
                setState(() {
                  targetColor = Colors.green;
                });
              },
              builder: (context, candidateData, rejectedData) {
                return Container(
                  color: targetColor,
                  width: 200,
                  height: 200,
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}