Flutter 中可拖动的 FloatingActionButton

Question

我想制作一个可拖动的浮动按钮，如果可能的话，在控制台中打印拖动位置。

Answer 1

由于能够以您想要的任何方式组合 Flutter 小部件，您可以简单地这样做：

Draggable(
    feedback: FloatingActionButton(child: Icon(Icons.drag_handle), onPressed: () {}),
    child: FloatingActionButton(child: Icon(Icons.drag_handle), onPressed: () {}),
    childWhenDragging: Container(),
    onDragEnd: (details) => print(details.offset))

这Draggable可以作为floatingActionButton参数传递给 a Scaffold。
该feedback参数控制最后拖动的小部件的外观，并child指定静止的Draggable外观。由于您可能只想一次看到一个 ，因此您可以传递一个空的to 。FloatingActionButton ContainerchildWhenDragging

Offset释放拖动时，拖动的（位置）将打印到控制台。

Answer 2

我需要添加一个定位小部件来设置按钮的位置

class _MyHomePageState extends State<MyHomePage> {
  Offset position =Offset(20.0, 20.0);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: Stack(
      children: <Widget>[
        Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("data_repo/img/bg1.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Positioned(
          left : position.dx,
          top  : position.dy ,
          child : Draggable(
          feedback: Container(
            child : FloatingActionButton(child: Icon(Icons.add), onPressed: () {})
            ),
          child: Container(
            child : FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
          ),
          childWhenDragging: Container(),
          onDragEnd: (details){
            setState(() {
              position = details.offset;
            });
            print(position);
            print(position.dx);
            print(position.dy);
            }))
      ],
    ));
  }
}