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 传递给{ {1}}。

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

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

Flutter中的可拖动FloatingActionButton

3 个答案: