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

Question

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

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

我试图用 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。

有没有人有解决这个问题的方法？

Answer 1

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

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