Flutter 可拖动的悬浮动作按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7HhngUB-1629168452638)(https://ducafecat.tech/2021/08/16/translation/draggable-floating-action-button-in-flutter/2021-08-16-11-25-54.png)]

原文

https://medium.com/flutterdevs/draggable-floating-action-button-in-flutter-2149a7e47f06

参考

• https://pub.flutter-io.cn/packages/get#reactive-state-manager
• https://dart.dev/guides/language/extension-methods

正文

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nfI3pYT-1629168452639)(https://ducafecat.tech/2021/08/16/translation/draggable-floating-action-button-in-flutter/2021-08-16-11-18-31.png)]

Flutter 允许您使用 FloatingActionButton 小部件添加一个浮动操作按钮。尽管如此，它不允许你拖动按钮。考虑一下你需要让它可拖动的可能性。本文有一个模型，它公开了制作一个浮动操作按钮需要做的事情，这个按钮可以在屏幕的任何地方拖动，只要它在父窗口小部件中。

在这个博客中，我们将探索 Flutter 的拖动浮动按钮。我们将看到如何实现一个演示程序的拖曳浮动行动按钮，并显示如何创建您的 Flutter 应用程序。

简介

下面的演示视频显示了如何创建一个可拖动的漂浮动作按钮在 Flutter。它显示了如何拖动浮动行动按钮将在您的 Flutter 应用程序的工作。它显示当代码成功运行时，用户将一个浮动操作按钮拖动到屏幕周围的任何地方，只要它在父窗口小部件中。它会显示在你的设备上。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABYKhpxB-1629168452640)(https://ducafecat.tech/2021/08/16/translation/draggable-floating-action-button-in-flutter/introduction.gif)]

如何实现 dart 文件中的代码

你需要分别在你的代码中实现它:

在 lib 文件夹中创建一个名为 main.dart 的新 dart 文件。

首先，我们将创建一个 Globalkey，并将其命名为 _parentKey

final GlobalKey _parentKey = GlobalKey();

在正文中，我们将添加一个具有高度和宽度的 Container 小部件。它是子属性，我们将添加 Stack 小部件。在这个小部件中，我们将添加一个键、文本和一个 DraggableFloatingActionButton ()。在按钮内部，我们将添加一个具有高度和宽度的容器。在其子属性中添加图像。此外，我们还将添加 initialOffset、父键和 onPressed。我们将深入定义下面的代码。

Container(
  width: 300,
  height: 300,
  child: Stack(
    key: _parentKey,
    children: [
      Container(color: Colors.cyan),
      Center(
        child: const Text(
          "FlutterDev's.com",
          style: const TextStyle(color: Colors.white, fontSize: 24),
        ),
      ),
      DraggableFloatingActionButton(
        child: Container(
          width: 60,
          height: 60,
          decoration: ShapeDecoration(
            shape: CircleBorder(),
            color: Colors.white,
          ),
          child: Image.asset("assets/logo.png"),