FloatingActionButton 扩展

FloatingActionButton 扩展

FloatingActionButton 是一个免费的悬浮操作按钮扩展，提供了高度可定制的悬浮按钮功能。该扩展支持自定义图标、颜色、大小、圆角半径、位置和文本，是 Material Design 设计规范中的经典组件。

与 FloatActionBtn 扩展的区别

FloatingActionButton 和 FloatActionBtn 都是用于创建悬浮操作按钮的扩展，主要区别如下：

特性	FloatingActionButton	FloatActionBtn
包名	`joejsanz.joedevfloatingactionbutton`	`com.kenmor.floatactionbtn`
版本	1.1 (较新)	1.0
文件大小	21.8 KB	13.6 KB (更轻量)
位置设置	自定义X/Y坐标	预定义四个位置
圆角控制	✅ 支持	❌ 不支持
动态生成	✅ 支持多按钮	❌ 单按钮
临时隐藏	✅ 支持	❌ 不支持
图标设置	文件路径	资源名称
功能复杂度	功能丰富	简洁实用

选择建议：

选择 FloatingActionButton：需要精确定位、多按钮管理、圆角控制或临时隐藏等高级功能
选择 FloatActionBtn：需要轻量级、简单易用、快速集成的悬浮按钮

下载链接

扩展文件：

joejsanz.joedevfloatingactionbutton.aix

示例文件：

FloatingActionButton.aia

功能概述

扩展特性

自定义图标：支持自定义 PNG 图标或使用默认加号图标
颜色自定义：可自定义背景颜色和图标颜色
大小调整：支持自定义按钮大小
圆角控制：可调整按钮的圆角半径
位置设置：支持设置按钮的水平和垂直位置
图标大小：可调整图标的大小
边距控制：可设置按钮的边距
触摸效果：支持按压时的视觉反馈效果
动态生成：支持通过代码动态生成多个按钮
临时隐藏：支持临时隐藏按钮功能

截图

Logo 和界面

应用截图

积木示例

积木示例1 积木示例2

功能示例

示例1 示例2 示例3 示例4 示例5 示例6

事件示例

事件1 事件2

函数

SetFabColor 设置按钮颜色(颜色)

设置悬浮按钮的背景颜色。

颜色：数字类型，颜色值（使用颜色组件）
返回类型：无返回值

SetFabSize 设置按钮大小(大小)

设置悬浮按钮的大小（像素）。

大小：数字类型，按钮的直径大小
返回类型：无返回值

SetFabPosition 设置按钮位置(水平位置,垂直位置)

设置悬浮按钮的位置。

水平位置：数字类型，X坐标位置
垂直位置：数字类型，Y坐标位置
返回类型：无返回值

SetFabRadius 设置圆角半径(半径)

设置悬浮按钮的圆角半径。

半径：数字类型，圆角半径值（0为方形，数值越大越圆）
返回类型：无返回值

SetFabIcon 设置图标(图标路径)

设置悬浮按钮的图标（PNG 文件路径）。

图标路径：文本类型，PNG 图标文件的完整路径
返回类型：无返回值

SetFabIconSize 设置图标大小(大小)

设置悬浮按钮内图标的大小。

大小：数字类型，图标的大小（像素）
返回类型：无返回值

SetFabIconColor 设置图标颜色(颜色)

设置悬浮按钮内图标的颜色。

颜色：数字类型，颜色值（使用颜色组件）
返回类型：无返回值

SetFabText 设置文本(文本)

设置悬浮按钮显示的文本（如果使用文本模式）。

文本：文本类型，要显示的文本内容
返回类型：无返回值

SetFabPadding 设置边距(左边距,上边距,右边距,下边距)

设置悬浮按钮的内边距。

左边距：数字类型，左内边距
上边距：数字类型，上内边距
右边距：数字类型，右内边距
下边距：数字类型，下内边距
返回类型：无返回值

SetFabMargin 设置外边距(左外边距,上外边距,右外边距,下外边距)

设置悬浮按钮的外边距。

左外边距：数字类型，左外边距
上外边距：数字类型，上外边距
右外边距：数字类型，右外边距
下外边距：数字类型，下外边距
返回类型：无返回值

CreateFab 创建按钮(位置X,位置Y,大小)

创建一个新的悬浮按钮（用于动态生成多个按钮）。

位置X：数字类型，X坐标位置
位置Y：数字类型，Y坐标位置
大小：数字类型，按钮大小
返回类型：无返回值

TemporarilyHideFAB 临时隐藏按钮(延迟)

临时隐藏悬浮按钮，并在指定延迟后自动显示。

延迟：数字类型，隐藏持续时间（毫秒）
返回类型：无返回值

ShowFAB 显示按钮()

显示悬浮按钮。

返回类型：无返回值

HideFAB 隐藏按钮()

隐藏悬浮按钮。

返回类型：无返回值

事件

FabClicked 按钮点击()

当悬浮按钮被点击时触发。

返回类型：无返回值

GeneratedButtonClicked 生成的按钮点击(按钮索引,图标路径)

当动态生成的按钮被点击时触发，返回按钮索引和图标路径。

按钮索引：数字类型，被点击按钮的索引号
图标路径：文本类型，按钮使用的图标路径
返回类型：无返回值

FloatingActionButtonHidden 按钮已隐藏()

当悬浮按钮因 TemporarilyHideFAB 而变为不可见时触发。

返回类型：无返回值

属性

FabColor 按钮颜色

获取或设置悬浮按钮的背景颜色。

类型：数字类型
默认值：-16776961（蓝色）

FabSize 按钮大小

获取或设置悬浮按钮的大小。

类型：数字类型
默认值：56

FabPositionX 位置X

获取或设置悬浮按钮的X坐标位置。

类型：数字类型
默认值：0

FabPositionY 位置Y

获取或设置悬浮按钮的Y坐标位置。

类型：数字类型
默认值：0

FabRadius 圆角半径

获取或设置悬浮按钮的圆角半径。

类型：数字类型
默认值：28（完全圆形）

FabIcon 图标

获取或设置悬浮按钮的图标路径。

类型：文本类型
默认值：空（使用默认加号）

FabIconSize 图标大小

获取或设置悬浮按钮图标的大小。

类型：数字类型
默认值：24

FabIconColor 图标颜色

获取或设置悬浮按钮图标的颜色。

类型：数字类型
默认值：-1（白色）

FabText 文本

获取或设置悬浮按钮的文本内容。

类型：文本类型
默认值：空

IsVisible 是否可见

获取悬浮按钮当前是否可见。

类型：布尔类型
只读：是

应用场景

1. Material Design 应用

实现标准的 Material Design 悬浮操作按钮：

当 Screen1.初始化
    调用 FloatingActionButton1.SetFabSize 按钮大小为56
    调用 FloatingActionButton1.SetFabColor 按钮颜色为蓝色
    调用 FloatingActionButton1.SetFabIconColor 图标颜色为白色
    调用 FloatingActionButton1.SetFabPosition 设置按钮位置为屏幕宽度-80 屏幕高度-150

2. 多功能菜单按钮

创建展开的悬浮菜单：

当 FloatingActionButton1.按钮点击
    如果 菜单展开 = false 则
        调用 CreateFab 创建按钮 位置X为100 位置Y为500 大小为40
        调用 CreateFab 创建按钮 位置X为100 位置Y为560 大小为40
        设置 菜单展开 为 true
    否则
        调用 HideFAB 隐藏所有生成的按钮
        设置 菜单展开 为 false

3. 快速操作按钮

为主功能提供快速访问：

当 FloatingActionButton1.按钮点击
    打开新建项目屏幕

4. 滚动时隐藏/显示

实现滚动时智能隐藏按钮：

当 ScrollArrangement1.滚动
    如果 ScrollArrangement1.当前Y坐标 > 100 则
        调用 FloatingActionButton1.HideFAB 隐藏按钮
    否则
        调用 FloatingActionButton1.ShowFAB 显示按钮

5. 临时操作提示

显示临时操作按钮：

当 任务完成
    调用 FloatingActionButton1.SetFabText 设置文本为"完成"
    调用 FloatingActionButton1.ShowFAB 显示按钮
    调用 FloatingActionButton1.TemporarilyHideFAB 临时隐藏按钮 延迟为3000

6. 动态按钮组

根据上下文动态创建按钮：

当 进入编辑模式
    调用 FloatingActionButton1.SetFabIcon 设置图标为"edit.png"
    调用 FloatingActionButton1.CreateFab 创建按钮 位置X为50 位置Y为500 大小为48

当 生成的按钮点击 按钮索引 索引 图标路径 路径
    如果 索引 = 0 则
        执行编辑操作
    否则如果 索引 = 1 则
        执行删除操作

使用说明

基本使用步骤

添加扩展：将 FloatingActionButton 扩展添加到项目中
设置属性：使用属性设置或函数设置按钮的外观
配置位置：设置按钮在屏幕上的位置
添加事件：为按钮点击事件添加处理逻辑
测试运行：在设备上测试按钮的显示和交互

重要提示

位置计算：位置从屏幕左上角开始计算
图标格式：只支持 PNG 格式的图标
图标路径：使用完整文件路径或资源路径
圆角设置：半径值为按钮大小的一半时为完全圆形
多实例：可以创建多个扩展实例来管理不同的按钮

最佳实践

大小规范：遵循 Material Design 规范，标准大小为 56dp，迷你大小为 40dp
位置选择：通常放置在屏幕右下角，避免遮挡重要内容
颜色选择：使用醒目的颜色，通常与主题色一致
图标选择：使用清晰、简洁的图标
功能单一：每个悬浮按钮应代表主要操作

技术说明

尺寸规范

根据 Material Design 规范：

标准按钮：56 × 56 dp，图标 24 × 24 dp
迷你按钮：40 × 40 dp，图标 24 × 24 dp
容器边距：16 dp

位置计算

坐标系统：从屏幕左上角 (0, 0) 开始
水平位置：从左到右增加
垂直位置：从上到下增加

圆角效果

0：方形按钮
大小/2：完全圆形
中间值：圆角矩形

版本信息

当前版本：1.1
发布日期：2025年6月15日
最后更新：2025年6月15日
JDK 版本：11
最低 API 级别：21（Android 5.0）
构建工具：FAST-CLI v3.6.1

兼容性

平台：App Inventor 2、Kodular、Thunkable
最低 Android 版本：Android 5.0 (Lollipop) API 21
测试状态：已在多个平台测试通过

常见问题

Q: 按钮不显示怎么办？

A: 检查是否设置了位置坐标，位置默认为 (0, 0) 可能被其他组件遮挡。

Q: 如何更改图标大小？

A: 使用 SetFabIconSize 方法或 FabIconSize 属性设置图标大小。

Q: 可以同时显示多个按钮吗？

A: 可以使用 CreateFab 方法动态生成多个按钮。

Q: 如何使按钮变成方形？

A: 将 FabRadius 设置为 0。

Q: 支持其他图片格式吗？

A: 目前只支持 PNG 格式的图标。

版权信息

本文档基于 MIT App Inventor Community 论坛帖子整理，原作者为 joejsanz (Joe Developer)。

原始链接：https://community.appinventor.mit.edu/t/floatingactionbutton-color-size-radius-position-icons-text/130867

文档翻译和整理：AI2中文网

最后更新：2024年12月29日

FloatingActionButton 扩展：悬浮操作按钮扩展，可自定义颜色、大小、位置和图标