Flutter :在屏幕上拖动窗口小部件(而不是拖放)

在 Flutter 中实现一个可以在屏幕上拖动的窗口小部件（而不是拖放），你可以使用 GestureDetector 和 Transform 组件来实现。以下是一个完整的示例，展示如何实现这一功能。

示例代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Draggable Widget Example'),
        ),
        body: DraggableWidget(),
      ),
    );
  }
}

class DraggableWidget extends StatefulWidget {
  @override
  _DraggableWidgetState createState() => _DraggableWidgetState();
}

class _DraggableWidgetState extends State<DraggableWidget> {
  double xOffset = 0;
  double yOffset = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: xOffset,
          top: yOffset,
          child: GestureDetector(
            onPanUpdate: (details) {
              setState(() {
                xOffset += details.delta.dx;
                yOffset += details.delta.dy;
              });
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Drag me',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

解释

创建主应用程序：
- MyApp 是主应用程序类，包含一个 MaterialApp 和一个 Scaffold，其中包含一个 AppBar 和 DraggableWidget。
创建可拖动的小部件：
- DraggableWidget 是一个 StatefulWidget，因为我们需要在拖动时更新其状态。
- _DraggableWidgetState 是其状态类，包含两个变量 xOffset 和 yOffset，用于存储小部件的当前位置。
使用 Stack 和 Positioned：
- Stack 允许我们在屏幕上自由定位小部件。
- Positioned 小部件根据 xOffset 和 yOffset 来定位。
使用 GestureDetector：
- GestureDetector 用于检测拖动手势。
- onPanUpdate 回调在拖动时触发，details.delta.dx 和 details.delta.dy 分别表示在 x 和 y 方向上的拖动距离。
- 在 onPanUpdate 回调中，我们更新 xOffset 和 yOffset，并调用 setState 以重新构建小部件，从而更新其位置。
显示可拖动的小部件：
- Container 是实际可拖动的小部件，设置了宽度、高度和背景颜色，并包含一个居中的文本。