← 返回导航条组件参考 · 全部使用指导

导航条使用指导

可见组件，一条现代 App 风格的导航栏：图标 + 文字标签、白色药丸指示器、半透明毛玻璃底， 点击切换标签时带动画。可以停靠在屏幕顶部或底部（停靠位置（Position）属性）， 常与几个垂直布局搭配，做出「多个页面、导航切换」的 App 骨架。

三步即可用：

1. 拖一个导航条到屏幕（默认停靠在底部）；
2. 初始化时调设置全部标签（图标列表，标签文字列表）（SetItems）给每个标签配图标和文字；
3. 接住选中标签（索引）（ItemSelected）事件，按序号切换页面内容。

默认外观（蓝色选中、灰色未选中、玻璃底、药丸指示器）已经耐看，不改任何属性直接可用； 全部可设置属性均可在设计器属性面板调整，也可通过积木动态修改，包括当前选中项、图标大小、字号、圆角、阴影、动画、毛玻璃及指示器。切换动画下拉显示中文，积木和项目文件仍使用英文值。

注意：该组件为新增内置组件，联机调试需更新到包含它的 AI 伴侣版本，打包 APK 不受影响； 鸿蒙编译已支持。

快速上手

1. 拖一个导航条到屏幕（默认 4 个标签、宽度充满父级）；
2. 拖一个标签到屏幕上方（改名 标签_标题，用来看选中结果）；
3. 搭下面的代码块：

when Screen1.Initialize() {
  导航条1.SetItems(list("", "", "", ""), list("首页", "分类", "购物车", "我的"))
}

when 导航条1.ItemSelected(索引) {
  标签_标题.Text = join("当前选中：第 ", 索引, " 个标签")
}

图标列表传空文本 "" 表示该标签先不配图标、只显示文字；要配图标时传素材文件名 （如 list("home.png", "find.png", "cart.png", "me.png")），也可以传本地路径或网络地址。

完整案例：四页 App 骨架

朋友圈底部导航的标准形态：四个页面（垂直布局）叠在屏幕里，靠可见性切换， 导航条停靠在最底部、毛玻璃模糊滚过它下面的内容。照着搭完得到的是能直接用的多页骨架。

第 1 步：搭界面

1. 拖 4 个垂直布局到屏幕，分别改名 垂直布局_首页、垂直布局_发现、垂直布局_消息、垂直布局_我的， 每个里面放几个标签、图像当作页面内容（高度建议给固定值，如 500）；
2. 拖一个导航条到屏幕（默认停靠底部，不用管它在布局树里的位置）；
3. （可选）上传四个图标素材：home.png、find.png、msg.png、me.png—— 建议用白色单色 PNG，组件会按选中/未选中颜色自动着色。

第 2 步：初始化标签并显示第一页

procedure 切换页面(页号) {
  垂直布局_首页.Visible = false
  垂直布局_发现.Visible = false
  垂直布局_消息.Visible = false
  垂直布局_我的.Visible = false
  if 页号 = 1 {
    垂直布局_首页.Visible = true
  } else if 页号 = 2 {
    垂直布局_发现.Visible = true
  } else if 页号 = 3 {
    垂直布局_消息.Visible = true
  } else {
    垂直布局_我的.Visible = true
  }
}

when Screen1.Initialize() {
  导航条1.SetItems(
    list("home.png", "find.png", "msg.png", "me.png"),
    list("首页", "发现", "消息", "我的")
  )
  切换页面(1)
}

第 3 步：接住切换事件

when 导航条1.ItemSelected(索引) {
  切换页面(索引)
}

跑起来：点底部任意标签，对应页面显示、指示器滑动过去；重复点当前标签事件照样触发 （可以在事件里加「刷新当前页」的逻辑）。

换到顶部停靠

把导航条的停靠位置（Position）设为 top（属性面板下拉或代码块均可）：

when Screen1.Initialize() {
  导航条1.Position = "top"
  导航条1.SetItems(list("", "", "", ""), list("首页", "发现", "消息", "我的"))
}

导航条停靠到屏幕顶部（标题栏下方），四个页面铺满全屏、滚动内容从导航条下面穿过去—— 毛玻璃模糊的就是这些滚过的真实内容。页面高度不用给导航条留位置。

悬浮菜单与悬浮球

只改一个属性即可切换模式：

when Screen1.Initialize() {
  导航条1.DisplayMode = "floatingMenu"
  导航条1.SetItems(list("home.png", "search.png", "me.png"), list("首页", "搜索", "我的"))
}

floatingMenu 显示带毛玻璃和圆角的紧凑悬浮菜单；需要 iOS AssistiveTouch 风格入口时使用 floatingBall，收起时是宽高相同的正圆，只显示当前项图标；点击展开全部标签，选择后收回圆球并触发选中事件。调用选中指定标签（索引）（SetSelectedItem）同样可切换当前项。

when Screen1.Initialize() {
  导航条1.DisplayMode = "floatingBall"
  导航条1.SelectedItem = 2
}
when 导航条1.ItemSelected(索引) {
  标签_标题.Text = join("已选中：", 索引)
}

在伴侣中点击圆球，应展开菜单；选另一项后应收回为圆形并更新标签。旋转屏幕后导航条仍保留当前位置与选择。

常见问题

限制与注意事项

1. 联机调试需新版 AI 伴侣（见文首说明）；打包 APK 不受影响。
2. 视频、地图等内容无法被模糊采样（Android 系统限制：视频播放器、地图等自绘视图 画不进采样位图），导航栏背后正好是这类组件时，该区域不参与毛玻璃。
3. 毛玻璃在滚动中自动重新采样（带最小间隔节流），静止时不持续耗电； 想要极致性能的页面可以关闭毛玻璃。

完整 .aia 源码与操作指导

下载 .aia 源码

首页、分类、消息、我的四标签导航，中文选择器涵盖六种动画和三种显示模式。点击实际导航更新内容反馈，可测试悬浮球展开、横竖屏恢复及毛玻璃。导航本身不是整套业务页面，内容区有明确替换位置。

导入 NavigatorAllFeatures.aia，连接最新伴侣，或编译独立安装包。真机／伴侣运行尚未实测。

所有返回值均用于界面反馈，错误由底部错误区展示。设计器采用明确非默认配置，初始化与界面同步。API 覆盖检查按最终 AIA 检查方法、事件、属性读取与设置及设计器配置，不能替代真实设备验证。

主流应用导航

导入方法：项目 → 导入项目（.aia）→ 选择下载的 .aia 源码文件。 首页、分类、消息、我的四标签导航，中文选择器涵盖六种动画和三种显示模式。点击实际导航更新内容反馈，可测试悬浮球展开、横竖屏恢复及毛玻璃。导航本身不是整套业务页面，内容区有明确替换位置。 覆盖检查 71/71。首次载入及保存重开均0个错误，真实后台导入、安装包编译通过；真机／伴侣／硬件联调尚未实测。全部属性读写、方法与事件的操作入口和预期结果见组件指导。