Flutter中的Draggable 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论证传递给Scaffold。 feedback参数控制最终拖动的小部件将如何显示，child指定固定的Draggable应该是什么样子。因为你可能只希望一次看到一个FloatingActionButton，你可以将空的Container传递给childWhenDragging。

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

Answer 2

您可以使用DraggableFloatingButton包：https://pub.dartlang.org/packages/draggable_floating_button

Answer 3

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

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);
            }))
      ],
    ));
  }
}