Flutter - 将 Draggable 从抽屉拖动到主体

Question

给定抽屉中的项目列表，是否可以以某种方式将其中一个项目从抽屉拖到脚手架主体上并拖入 DragTarget？

下面是一个简化的示例，显示了我通常希望发生的情况。除了当我弹出导航器时，可拖动上下文也会消失，因为这显然是抽屉的一部分。我不知道如何解决这个问题。或者如果这可能的话......

import 'package:flutter/material.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String droppedItem = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drag and Drop Example'),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.grey,
          child: DragTarget<String>(
            onWillAcceptWithDetails: (details) {
              setState(() {
                droppedItem = details.data;
              });
              return true;
            },
            builder: (context, candidateData, rejectedData) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Icon(
                    Icons.cloud_upload,
                    size: 50,
                    color: Colors.blue,
                  ),
                  Text(
                    'Drop Here : \n $droppedItem',
                    style: const TextStyle(fontSize: 20),
                  ),
                ],
              );
            },
          ),
        ),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            Draggable<String>(
              data: 'Item 1',
              feedback: Container(
                color: Colors.deepOrange,
                height: 50,
                width: 50,
                child: const Icon(Icons.directions_run),
              ),
              childWhenDragging: const ListTile(
                title: Text('Item 1'),
                leading: Icon(Icons.drag_handle), // Placeholder icon
              ),
              child: const ListTile(
                title: Text('Item 1'),
                leading: Icon(Icons.drag_handle), // Placeholder icon
              ),
              // onDragStarted: () {
              //   Navigator.pop(context);
              // },
            ),
            Draggable<String>(
              data: 'Item 2',
              feedback: Container(
                color: Colors.deepOrange,
                height: 50,
                width: 50,
                child: const Icon(Icons.directions_run),
              ),
              childWhenDragging: const ListTile(
                title: Text('Item 2'),
                leading: Icon(Icons.drag_handle), // Placeholder icon
              ),
              child: const ListTile(
                title: Text('Item 2'),
                leading: Icon(Icons.drag_handle), // Placeholder icon
              ),
              // onDragStarted: () {
              //   Navigator.pop(context);
              // },
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

如果需要使用抽屉，这可能不适合您的用例，但是：您可以将按钮映射到脚手架上，以引入一个自定义小部件，该小部件伪装成抽屉作为叠加层。在这种情况下，这会给你带来巨大的力量：

import 'package:flutter/material.dart';
import 'package:stack_overflow_dev_region/suggested.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePageRefactor(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String droppedItem = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Drag and Drop Example'),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.grey,
          child: DragTarget<String>(
            onWillAcceptWithDetails: (details) {
              setState(() {
                droppedItem = details.data;
              });
              return true;
            },
            builder: (context, candidateData, rejectedData) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Icon(
                    Icons.cloud_upload,
                    size: 50,
                    color: Colors.blue,
                  ),
                  Text(
                    'Drop Here : \n $droppedItem',
                    style: const TextStyle(fontSize: 20),
                  ),
                ],
              );
            },
          ),
        ),
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            Draggable<String>(
              data: 'Item 1',
              feedback: Container(
                color: Colors.deepOrange,
                height: 50,
                width: 50,
                child: const Icon(Icons.directions_run),
              ),
              childWhenDragging: const ListTile(
                title: Text('Item 1'),
                leading: Icon(Icons.drag_handle), // Placeholder icon
              ),
              child: const ListTile(
                title: Text('Item 1'),
                leading: Icon(Icons.drag_handle), // Placeholder icon
              ),
              // onDragStarted: () {
              //   Navigator.pop(context);
              // },
            ),
            Draggable<String>(
              data: 'Item 2',
              feedback: Container(
                color: Colors.deepOrange,
                height: 50,
                width: 50,
                child: const Icon(Icons.directions_run),
              ),
              childWhenDragging: const ListTile(
                title: Text('Item 2'),
                leading: Icon(Icons.drag_handle), // Placeholder icon
              ),
              child: const ListTile(
                title: Text('Item 2'),
                leading: Icon(Icons.drag_handle), // Placeholder icon
              ),
              // onDragStarted: () {
              //   Navigator.pop(context);
              // },
            ),
          ],
        ),
      ),
    );
  }
}

这是我的重构。请注意，如果您想要阴影、复杂的手势或许多其他类似抽屉的场景，则需要进一步调整起始代码。

此示例的主要重点只是证明您可以通过使用叠加层和动画控制器来实现与您所要求的类似（尽管公平地说：不完全是）的东西。