Flutter 实现全局悬浮按钮学习

Flutter 代码如何实现了一个全局悬浮按钮，当点击按钮时，会显示一个可以拖动并且通过长按可以移除的悬浮控件。

前置知识点学习

Offset

`Offset` 是 Flutter 中的一个类，用于表示二维平面中的位置或位移。它通常用于描述坐标系中的一个点，或者用于指定某种移动的向量。`Offset` 是在 Flutter 的绘制和布局过程中非常常用的类，尤其是在自定义绘制和触摸事件处理中。

构造函数

`Offset(double dx, double dy)`:

• `dx`: 在水平方向上的偏移量。

• `dy`: 在垂直方向上的偏移量。

常用属性

• `dx`: 水平方向的偏移量。

• `dy`: 垂直方向的偏移量。

常用方法

• `distance`: 返回从原点（0, 0）到这个偏移量的直线距离。

• `direction`: 返回从原点到这个偏移量的角度（以弧度为单位），相对于水平方向。

• `scale(double scaleX, double scaleY)`: 返回一个新的 `Offset`，其 `dx` 和 `dy` 分别乘以 `scaleX` 和 `scaleY`。

• `translate(double translateX, double translateY)`: 返回一个新的 `Offset`，其 `dx` 和 `dy` 加上 `translateX` 和 `translateY`。

操作符重载

• 加法 (`+`): 可以将两个 `Offset` 相加，返回新的 `Offset`。

• 减法 (`-`): 可以将两个 `Offset` 相减，返回新的 `Offset`。

• 乘法 (`*`): 可以将 `Offset` 与一个标量相乘，返回新的 `Offset`。

• 除法 (`/`): 可以将 `Offset` 与一个标量相除，返回新的 `Offset`。

示例

下面是一个简单的示例，展示如何使用 `Offset`：

import 'package:flutter/material.dart';

class OffserExample extends StatelessWidget {
  const OffserExample({super.key});

  @override
  Widget build(BuildContext context) {
    Offset offset1 = const Offset(10.0, 20.0);
    Offset offset2 = const Offset(5.0, 15.0);
    Offset result = offset1 + offset2; // Add two offsets
    double distance = result.distance; // Calculate distance from origin

    return Scaffold(
      appBar: AppBar(
        title: const Text('Offset Example'),
      ),
      body: Center(
        child: Text(
          'Resulting Offset: $result\nDistance from origin: $distance',
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

解释

• 在这个示例中，`offset1` 和 `offset2` 是两个 `Offset` 实例。

• 通过 `+` 操作符，我们将两个 `Offset` 相加，得到一个新的 `Offset`。

• `distance` 属性计算从原点到 `result` 的直线距离。

使用场景

• 自定义绘制: 在 Flutter 的 `CustomPainter` 中，`Offset` 常用于指定绘制起点。

• 触摸事件: 在处理触摸事件时，`Offset` 用于描述触摸点的位置。

• 布局计算: 在自定义布局逻辑中，`Offset` 可以用于计算组件的位置和移动。

Overlay

`Overlay` 是 Flutter 中的一个强大组件，用于在应用的普通界面层之上创建浮动层。它允许开发者在现有界面之上展示额外的内容，比如弹出窗口、工具提示、悬浮按钮等。这种层叠效果是通过 `OverlayEntry` 来实现的。

主要特性

• 层叠显示: `Overlay` 可以将多个 `OverlayEntry` 叠加在一起，形成一个层次结构，最上面的条目会显示在最上层。

• 动态插入和移除: 可以在运行时动态添加或移除 `OverlayEntry`，从而实现动态显示和隐藏界面元素。

• 灵活性: 可以在任何地方插入 `OverlayEntry`，不受父组件的限制，这给予了开发者极大的灵活性。

核心组件

1.`Overlay`:

• `Overlay` 是一个用于管理和显示 `OverlayEntry` 的容器。通常在 `MaterialApp` 的根布局中已经存在一个 `Overlay`。

2.`OverlayEntry`:

• `OverlayEntry` 是一个可以插入到 `Overlay` 中的条目。每个条目都可以独立控制其显示和隐藏。

使用步骤

1.获取 `Overlay` 的引用:

• 使用 `Overlay.of(context)` 来获得当前上下文的 `Overlay` 实例。

2.创建 `OverlayEntry`:

• 定义一个 `OverlayEntry`，提供一个 `builder` 方法来返回要显示的 widget。

3.插入 `OverlayEntry`:

• 使用 `Overlay.insert(overlayEntry)` 方法，将 `OverlayEntry` 插入到 `Overlay` 中。

4.移除 `OverlayEntry`:

• 调用 `overlayEntry.remove()` 方法来从 `Overlay` 中移除条目。

示例

以下是一个简单的示例，展示如何使用 `Overlay` 来显示一个悬浮的红色圆形按钮：

import 'package:flutter/material.dart';

class OverlayExample extends State