​
App Inventor 2 悬浮导航栏教程

覆盖：底部导航栏、侧边抽屉菜单、悬浮操作按钮（FAB）三种常见导航模式。

​
一、方案对比

导航类型实现难度适用场景
底部导航栏⭐⭐主要功能切换（微信底部Tab）
侧边抽屉菜单⭐⭐功能较多的App
悬浮操作按钮（FAB）⭐主要操作快捷入口

​
二、底部导航栏

​
2.1 实现原理

用水平布局固定在屏幕底部，内含多个图标按钮，点击切换页面内容。

​
2.2 界面结构

Screen1（垂直布局）
├── 垂直布局_内容区（充满，可滚动）
│   ├── 布局_首页（默认可见）
│   ├── 布局_发现（不可见）
│   ├── 布局_消息（不可见）
│   └── 布局_我的（不可见）
└── 水平布局_底部导航（固定高度60px，充满宽度）
    ├── 按钮_首页（图标+文字）
    ├── 按钮_发现（图标+文字）
    ├── 按钮_消息（图标+文字）
    └── 按钮_我的（图标+文字）

​
2.3 代码块

初始化全局变量 当前页面 = "首页"

// 切换页面过程
定义 切换页面(页面名)
  // 隐藏所有页面
  设置 布局_首页.可见 = 假
  设置 布局_发现.可见 = 假
  设置 布局_消息.可见 = 假
  设置 布局_我的.可见 = 假
  
  // 显示目标页面
  如果 页面名 = "首页" 则 设置 布局_首页.可见 = 真
  否则如果 页面名 = "发现" 则 设置 布局_发现.可见 = 真
  否则如果 页面名 = "消息" 则 设置 布局_消息.可见 = 真
  否则如果 页面名 = "我的" 则 设置 布局_我的.可见 = 真
  
  // 更新导航栏选中状态
  调用 更新导航选中(页面名)
  设置 全局变量 当前页面 = 页面名

// 更新导航栏选中样式
定义 更新导航选中(选中页面)
  初始化局部变量 选中色 = 0xFF2196F3    // 蓝色
  初始化局部变量 默认色 = 0xFF9E9E9E    // 灰色
  
  设置 按钮_首页.文字颜色 = 如果 选中页面="首页" 则 选中色 否则 默认色
  设置 按钮_发现.文字颜色 = 如果 选中页面="发现" 则 选中色 否则 默认色
  设置 按钮_消息.文字颜色 = 如果 选中页面="消息" 则 选中色 否则 默认色
  设置 按钮_我的.文字颜色 = 如果 选中页面="我的" 则 选中色 否则 默认色

// 初始化
当 Screen1.初始化 时
  调用 切换页面("首页")

// 导航按钮点击
当 按钮_首页.被点击 时
  调用 切换页面("首页")
当 按钮_发现.被点击 时
  调用 切换页面("发现")
当 按钮_消息.被点击 时
  调用 切换页面("消息")
当 按钮_我的.被点击 时
  调用 切换页面("我的")

​
2.4 消息红点提示

// 显示消息数量红点
定义 设置消息红点(数量)
  如果 数量 > 0 则
    设置 标签_消息红点.文本 = 如果 数量 > 99 则 "99+" 否则 转换为文本(数量)
    设置 标签_消息红点.可见 = 真
  否则
    设置 标签_消息红点.可见 = 假

​
三、侧边抽屉菜单

​
3.1 实现原理

用一个垂直布局覆盖在主内容上方，默认隐藏在屏幕左侧（宽度0），点击菜单按钮时展开。

​
3.2 代码块

初始化全局变量 菜单已展开 = 假

// 打开菜单
定义 打开菜单()
  设置 布局_侧边菜单.可见 = 真
  设置 布局_遮罩.可见 = 真    // 半透明遮罩
  设置 全局变量 菜单已展开 = 真

// 关闭菜单
定义 关闭菜单()
  设置 布局_侧边菜单.可见 = 假
  设置 布局_遮罩.可见 = 假
  设置 全局变量 菜单已展开 = 假

// 菜单按钮（汉堡菜单图标）
当 按钮_菜单.被点击 时
  如果 全局变量 菜单已展开 则
    调用 关闭菜单()
  否则
    调用 打开菜单()

// 点击遮罩关闭菜单
当 布局_遮罩.被点击 时
  调用 关闭菜单()

// 菜单项点击
当 按钮_菜单_首页.被点击 时
  调用 关闭菜单()
  调用 切换页面("首页")

当 按钮_菜单_设置.被点击 时
  调用 关闭菜单()
  调用 打开另一屏幕("SettingsScreen")

​
四、悬浮操作按钮（FAB）

​
4.1 实现原理

FAB（Floating Action Button）是一个圆形按钮，悬浮在内容上方，通常用于主要操作（如新建、添加）。

​
4.2 代码块

// FAB按钮设置（在设计器中）
// - 形状：圆形
// - 大小：56×56像素
// - 背景色：主题色
// - 图标：+号或其他图标
// - 位置：绝对布局右下角，或用边距实现

// FAB点击展开子菜单
初始化全局变量 FAB已展开 = 假

当 按钮_FAB.被点击 时
  如果 全局变量 FAB已展开 = 假 则
    // 展开子菜单
    设置 布局_FAB子菜单.可见 = 真
    设置 按钮_FAB.文本 = "✕"    // 变为关闭图标
    设置 全局变量 FAB已展开 = 真
  否则
    // 收起子菜单
    设置 布局_FAB子菜单.可见 = 假
    设置 按钮_FAB.文本 = "+"
    设置 全局变量 FAB已展开 = 假

// 子菜单项
当 按钮_FAB_拍照.被点击 时
  设置 布局_FAB子菜单.可见 = 假
  设置 全局变量 FAB已展开 = 假
  调用 摄像头1.拍照

当 按钮_FAB_上传.被点击 时
  设置 布局_FAB子菜单.可见 = 假
  设置 全局变量 FAB已展开 = 假
  调用 图片选择器1.打开

​
五、完整导航框架

// 综合方案：底部导航 + FAB + 侧边菜单
Screen1
├── 水平布局_顶部栏
│   ├── 按钮_菜单（汉堡图标）
│   ├── 标签_标题
│   └── 按钮_搜索
├── 垂直布局_内容区（充满）
│   ├── 布局_首页
│   ├── 布局_发现
│   ├── 布局_消息
│   └── 布局_我的
├── 水平布局_底部导航
│   ├── 按钮_首页
│   ├── 按钮_发现
│   ├── 按钮_消息（带红点）
│   └── 按钮_我的
├── 按钮_FAB（悬浮，右下角）
├── 布局_FAB子菜单（默认隐藏）
├── 布局_侧边菜单（默认隐藏）
└── 布局_遮罩（默认隐藏，半透明黑色）

​
六、常见问题

​
Q1：底部导航栏如何固定在底部？

  • 使用垂直布局作为Screen的主布局
  • 内容区设置高度”充满”（-2）
  • 底部导航栏设置固定高度（如60像素）
  • 内容区在上，导航栏在下，垂直排列

​
Q2：侧边菜单如何实现滑动动画？

App Inventor 2 原生不支持动画，可以：
  • 使用 计时器 + 逐步改变宽度模拟滑动
  • 使用 WebView + CSS动画实现

​
Q3：FAB如何定位在右下角？

  • 使用绝对布局（AbsoluteArrangement），设置X/Y坐标
  • 或在垂直布局中用对齐方式实现

​
参考资料

文档版本：2026.03 | 作者：App Inventor 2 中文网 www.fun123.cn

​
参考资料与版权声明

​
原文来源

​
版权声明

本文档基于 MIT App Inventor 官方文档及社区资源整理，版权归原作者所有：
  • MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权
  • MIT App Inventor Community 帖子版权归原作者所有
本文档由 ai2claw 🐝 整理，仅供学习参考，如有侵权请联系删除。