Flutter：如何创建可移动的小部件答案

【问题标题】：Flutter: how to create moveable widgetFlutter：如何创建可移动的小部件
【发布时间】：2021-05-12 13:21:18
【问题描述】：

我试图创建一个可移动的文本小部件。

当我按下小部件并开始在屏幕上移动手指（仍然按下小部件）时，小部件的位置也应该移动。

我曾尝试使用 GestureDetector 和 Transform 小部件来做到这一点。

代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);



  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MoveText(),
          ],
        ),
      ),
    );
  }
}

class MoveText extends StatefulWidget{
  
  @override
  _MoveTextState createState() => _MoveTextState();
}

class _MoveTextState extends State<MoveText> {
  Offset offset = Offset(0.0, 0.0);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPressMoveUpdate: (LongPressMoveUpdateDetails details) {
        print('${details.localPosition}');
      },
      onPanStart: (details){
      },
      onPanUpdate: (details){
        print('Pan update ${details.localPosition}');
        setState((){
          offset = details.localPosition;
        });
      },
      onPanCancel: (){
        print('Pan cancel');
      },
      child: Transform(
        transform: Matrix4.translationValues(offset.dx, offset.dy, 0.0),
        child: Container(
          height: 50,
          width: 200,
          color: Colors.yellow,
          child: Text('Some text for test'),
        ),
      ),
    );
  }
}

当我第一次点击小部件并开始移动时，一切正常，但当我停止并想再次开始移动时，不会调用 onPanUpdate。

有人有解决这个问题的办法吗？

【问题讨论】：

由于Transform 小部件而出现此问题。我认为这将是一个转换小部件框架问题。第二次尝试进行平移更新时，它不允许 GestureDetector。如果我删除了 Transform 小部件，则每次都会调用 pan update 回调。你能从你身边检查吗？

标签： flutter gesturedetector

【解决方案1】：

您需要的是一个Draggable 小部件。

访问以获取更多信息：https://api.flutter.dev/flutter/widgets/Draggable-class.html

【讨论】：