• FloatActionBtn 扩展
  • 与 FloatingActionButton 扩展的区别
  • 下载链接
  • 功能概述
    • 扩展特性
  • 截图
    • Logo 和界面
    • 功能示例
    • 积木示例
  • 函数
  • 事件
  • 属性
  • 应用场景
    • 1. 快速新建按钮
    • 2. 自定义图标按钮
    • 3. 多位置按钮
    • 4. 调整按钮样式
    • 5. 条件显示按钮
    • 6. 颜色主题适配
  • 使用说明
    • 基本使用步骤
    • 重要提示
    • 位置说明
    • 图标设置
    • 最佳实践
  • 技术说明
    • 尺寸规范
    • 波纹效果
    • 图标要求
  • 版本信息
  • 常见问题
    • Q: 如何更改按钮位置？
    • Q: 支持自定义图标吗？
    • Q: 如何禁用波纹效果？
    • Q: 可以设置任意位置吗？
    • Q: 按钮不显示怎么办？
  • 版权信息

« 返回首页

FloatActionBtn 扩展

FloatActionBtn 是一个免费的悬浮操作按钮扩展，为 App Inventor 平台提供可定制的 Material Design 风格悬浮按钮。该扩展支持自定义 PNG 图标、默认加号图标、颜色、大小、位置、边距控制和触摸效果。

与 FloatingActionButton 扩展的区别

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

选择建议：

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

下载链接

扩展文件：

com.kenmor.floatactionbtn.aix

功能概述

扩展特性

• 自定义图标：支持从资源加载自定义 PNG 图标
• 默认图标：提供默认加号 (+) 图标
• 颜色自定义：可自定义背景颜色和图标颜色
• 大小调整：支持自定义按钮大小
• 位置设置：支持四个角的位置（左上、右上、左下、右下）
• 边距控制：可设置按钮的边距
• 触摸效果：支持按压/触摸时的视觉反馈效果
• 轻量级：文件体积小，仅 13.6 KB

截图

Logo 和界面

功能示例

积木示例

函数

SetFabSize 设置按钮大小(大小)

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

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

SetFabColor 设置按钮颜色(颜色)

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

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

SetIconColor 设置图标颜色(颜色)

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

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

SetFabPosition 设置按钮位置(位置)

设置悬浮按钮的位置。

• 位置：文本类型，可选值：”TopLeft”、”TopRight”、”BottomLeft”、”BottomRight”
• 返回类型：无返回值

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

设置悬浮按钮的内边距。

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

SetIconFromAsset 设置资源图标(图标名称)

从项目资源中设置自定义 PNG 图标。

• 图标名称：文本类型，PNG 图标的文件名（不含扩展名）
• 返回类型：无返回值

UseDefaultIcon 使用默认图标()

使用默认的加号 (+) 图标。

• 返回类型：无返回值

ShowFab 显示按钮()

显示悬浮按钮。

• 返回类型：无返回值

HideFab 隐藏按钮()

隐藏悬浮按钮。

• 返回类型：无返回值

EnableRippleEffect 启用波纹效果(启用)

启用或禁用按钮的波纹触摸效果。

• 启用：布尔类型，是否启用波纹效果
• 返回类型：无返回值

事件

FabClicked 按钮点击()

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

• 返回类型：无返回值

属性

FabSize 按钮大小

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

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

FabColor 按钮颜色

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

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

IconColor 图标颜色

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

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

FabPosition 按钮位置

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

• 类型：文本类型
• 默认值：”BottomRight”
• 可选值：”TopLeft”、”TopRight”、”BottomLeft”、”BottomRight”

PaddingLeft 左边距

获取或设置左内边距。

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

PaddingTop 上边距

获取或设置上内边距。

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

PaddingRight 右边距

获取或设置右内边距。

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

PaddingBottom 下边距

获取或设置下内边距。

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

IsVisible 是否可见

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

• 类型：布尔类型
• 只读：是

RippleEnabled 波纹效果启用

获取或设置是否启用了波纹触摸效果。

• 类型：布尔类型
• 默认值：true

应用场景

1. 快速新建按钮

创建快速新建项目的悬浮按钮：

当 Screen1.初始化
    调用 FloatActionBtn1.SetFabPosition 设置按钮位置为"BottomRight"
    调用 FloatActionBtn1.SetFabSize 设置按钮大小为56
    调用 FloatActionBtn1.SetFabColor 设置按钮颜色为应用主题色
    调用 FloatActionBtn1.UseDefaultIcon 使用默认图标

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

2. 自定义图标按钮

使用自定义图标的悬浮按钮：

当 Screen1.初始化
    调用 FloatActionBtn1.SetIconFromAsset 设置资源图标为"custom_icon"
    调用 FloatActionBtn1.SetFabColor 设置按钮颜色为绿色
    调用 FloatActionBtn1.SetIconColor 设置图标颜色为白色

3. 多位置按钮

在不同位置显示悬浮按钮：

当 Button_切换位置.点击
    如果 当前位置 = "BottomRight" 则
        调用 FloatActionBtn1.SetFabPosition 设置按钮位置为"TopRight"
        设置 当前位置 为 "TopRight"
    否则如果 当前位置 = "TopRight" 则
        调用 FloatActionBtn1.SetFabPosition 设置按钮位置为"TopLeft"
        设置 当前位置 为 "TopLeft"

4. 调整按钮样式

自定义按钮大小和边距：

当 Screen1.初始化
    调用 FloatActionBtn1.SetFabSize 设置按钮大小为64
    调用 FloatActionBtn1.SetPadding 设置边距为16 16 16 16
    调用 FloatActionBtn1.EnableRippleEffect 启用波纹效果为true

5. 条件显示按钮

根据用户权限显示或隐藏按钮：

当 用户登录状态改变
    如果 用户已登录 = true 则
        调用 FloatActionBtn1.ShowFab 显示按钮
    否则
        调用 FloatActionBtn1.HideFab 隐藏按钮

6. 颜色主题适配

根据应用主题调整按钮颜色：

当 应用主题改变
    如果 主题模式 = "深色" 则
        调用 FloatActionBtn1.SetFabColor 设置按钮颜色为浅色
        调用 FloatActionBtn1.SetIconColor 设置图标颜色为深色
    否则
        调用 FloatActionBtn1.SetFabColor 设置按钮颜色为深色
        调用 FloatActionBtn1.SetIconColor 设置图标颜色为浅色

使用说明

基本使用步骤

1. 添加扩展：将 FloatActionBtn 扩展添加到项目中
2. 上传图标（可选）：将 PNG 图标上传到项目的 Assets 文件夹
3. 设置属性：使用设计器属性面板或积木块设置按钮外观
4. 配置位置：选择按钮在屏幕上的位置
5. 添加事件：为按钮点击事件添加处理逻辑
6. 测试运行：在设备上测试按钮的显示和交互

重要提示

• 图标格式：只支持 PNG 格式的图标
• 图标位置：图标应放在项目的 Assets 文件夹中
• 位置选项：只能在四个预定义位置中选择（左上、右上、左下、右下）
• 默认位置：默认为右下角 (BottomRight)
• 边距设置：边距以像素为单位

位置说明

扩展支持以下四个预定义位置：

• TopLeft：屏幕左上角
• TopRight：屏幕右上角
• BottomLeft：屏幕左下角
• BottomRight：屏幕右下角（默认）

图标设置

有两种设置图标的方式：

1. 默认图标：使用 UseDefaultIcon 方法使用加号 (+) 图标
2. 自定义图标：使用 SetIconFromAsset 方法从资源加载 PNG 图标

最佳实践

1. 位置选择：右下角是最常用的位置，符合大多数用户习惯
2. 大小规范：标准大小为 56dp，迷你大小为 40dp
3. 颜色对比：确保图标颜色与背景颜色有足够的对比度
4. 功能单一：每个悬浮按钮应代表一个主要操作
5. 边距设置：适当设置边距避免按钮贴边显示

技术说明

尺寸规范

根据 Material Design 规范：

• 标准按钮：56 × 56 dp
• 迷你按钮：40 × 40 dp
• 图标大小：24 × 24 dp
• 推荐边距：16 dp

波纹效果

波纹效果是 Material Design 的特色触摸反馈：

• 提供视觉反馈，增强用户交互体验
• 从触摸点向四周扩散的波纹动画
• 可以通过 EnableRippleEffect 方法启用或禁用

图标要求

• 格式：必须是 PNG 格式
• 尺寸：推荐 24 × 24 dp 或 48 × 48 dp
• 背景：图标应具有透明背景
• 颜色：建议使用单色图标，颜色可通过 SetIconColor 设置

版本信息

• 当前版本：1.0
• 发布日期：2025年8月31日
• 文件大小：13.6 KB
• 兼容性：App Inventor 2、Kodular、Thunkable

常见问题

Q: 如何更改按钮位置？

A: 使用 SetFabPosition 方法，可以设置为 “TopLeft”、”TopRight”、”BottomLeft” 或 “BottomRight”。

Q: 支持自定义图标吗？

A: 支持，使用 SetIconFromAsset 方法从项目资源加载 PNG 图标。

Q: 如何禁用波纹效果？

A: 使用 EnableRippleEffect(false) 方法。

Q: 可以设置任意位置吗？

A: 不可以，只能在四个预定义的位置中选择。

Q: 按钮不显示怎么办？

A: 检查是否调用了 ShowFab 方法，确认按钮没有被隐藏。

版权信息

本文档基于 MIT App Inventor Community 论坛帖子整理，原作者为 Kenneth Morales (KenMorales)。

原始链接：https://community.appinventor.mit.edu/t/free-floatactionbtn/154743

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

最后更新：2024年12月29日