← 返回滑动菜单组件参考 · 全部使用指导

滑动菜单使用指导

• 滑动菜单使用指导
  • 快速上手：底部分享面板
  • 侧边抽屉（侧滑菜单）
  • 关闭动画与滑动关闭
  • 常见问题
  • 搭建与测试
  • 案例：主动关闭筛选面板
  • 属性、方法与事件速查
  • 常见问题与验收
  • 完整 .aia 源码与操作指导
    • 滑动菜单

不可见组件：把屏幕上的一个布局装进弹出层显示——从底部滑出（分享面板、筛选条件、选择器）、 居中弹出当自定义对话框（登录框、确认页），或从左右两侧滑出当侧边抽屉（侧滑菜单）。原生对话框只能放文字， 滑动菜单里可以放任意组件：输入框、按钮、列表、图片都行，各组件的事件照常写。

用法三步：设计器里搭好一个布局当面板内容 → 屏幕初始化时设置内容（布局）（SetContent） → 需要时显示（Show）/关闭（Hide）。 「设置内容」会把这个布局从屏幕上挪进面板，不再占原来的位置；「显示」时自动让它可见。 所以面板布局在设计器里通常取消勾选「可见」，免得打开屏幕时一闪而过（设计器里勾选「显示隐藏组件」就能继续编辑它）。

快速上手：底部分享面板

1. 拖一个按钮（改名 按钮_分享）和一个标签（改名 标签_结果）；
2. 拖一个垂直布局（改名 垂直布局_面板，宽度设为充满，取消勾选「可见」），里面放三个按钮： 按钮_微信、按钮_朋友圈、按钮_取消；
3. 拖一个滑动菜单（默认从底部滑出）；
4. 搭下面的代码块：

各案例独立使用；组合到同一屏幕时，将同名事件的处理合并到一个事件积木中。

when Screen1.Initialize() {
  滑动菜单1.SetContent(垂直布局_面板)
}

when 按钮_分享.Click {
  滑动菜单1.Show()
}

when 按钮_微信.Click {
  标签_结果.Text = "已分享到微信"
  滑动菜单1.Hide()
}

when 按钮_朋友圈.Click {
  标签_结果.Text = "已分享到朋友圈"
  滑动菜单1.Hide()
}

when 按钮_取消.Click {
  滑动菜单1.Hide()
}

运行后点「分享」，面板从底部滑上来；点面板外面、按返回键或点「取消」都会收起。 把模式（Mode）改成 center 就变成居中的自定义对话框。

侧边抽屉（侧滑菜单）

模式（Mode）设为 left（或 right），面板就从屏幕左侧（右侧）滑出，铺满高度、宽度为屏幕的 80%。 菜单内容自己搭：顶部放头像和昵称，下面放几个按钮当菜单项。

1. 拖一个垂直布局（改名 垂直布局_菜单，宽度充满，取消勾选「可见」），里面放一个标签（标签_昵称）和三个按钮 按钮_首页、按钮_收藏、按钮_设置；
2. 拖一个滑动菜单，模式选 left；再拖一个按钮（按钮_菜单）用来打开抽屉，一个标签（标签_结果）显示点了哪项；
3. 搭下面的代码块：

when Screen1.Initialize() {
  滑动菜单1.SetContent(垂直布局_菜单)
  标签_昵称.Text = "你好，小明"
}

when 按钮_菜单.Click {
  滑动菜单1.Show()
}

when 按钮_首页.Click {
  标签_结果.Text = "打开了首页"
  滑动菜单1.Hide()
}

when 按钮_设置.Click {
  标签_结果.Text = "打开了设置"
  滑动菜单1.Hide()
}

关闭动画与滑动关闭

关闭时会播放打开动画的反向效果：左侧菜单向左收回，右侧菜单向右收回，底部面板向下收回，居中面板缩小淡出。点空白遮罩、按返回键和调用关闭方法共用该效果；“已关闭”事件在动画完成后触发。

点外面可关闭默认开启，同时允许手势关闭：在左侧菜单上向左滑、右侧菜单上向右滑、底部面板上向下滑。面板跟随手指移动；短滑或取消手势会回弹，明显向外滑动或快速甩动才会关闭。反方向滑动和侧边菜单里的纵向滚动不会关闭菜单。居中面板不使用滑动关闭。

把点外面可关闭设为假时，空白点击、返回键和关闭手势均无效，仍可调用关闭方法。嵌套列表、滚动布局等优先处理自己的滚动；可先在面板空白处测试关闭手势。

用上面的侧边菜单案例测试：打开菜单，向左滑动收回；再打开后点右侧空白，应看到同样的收回动画。把模式改成 right，改为向右滑关闭；改成 bottom，向下滑关闭。关闭过程中再次调用显示，会取消关闭并恢复面板，不会被上一次的延迟回调关掉。

常见问题

搭建与测试

在设计器拖入本组件和案例涉及的按钮、标签、布局等组件，按案例中的名称重命名。先运行最小案例，确认事件返回，再增加业务逻辑。示例中的素材先上传到项目，服务器地址、令牌、文件路径换成自己的值。

可见组件需要有非零宽高；不可见工具组件必须由属性或方法启动。设计器展示样式不等于运行时已加载数据或绑定目标。联机测试应使用包含本组件的 AI 伴侣；涉及系统入口或权限的行为还要编译安装后验证。

案例：主动关闭筛选面板

放滑动菜单、垂直布局_筛选、打开和关闭按钮。布局先注册为内容，再显示弹层。

when Screen1.Initialize() {
  滑动菜单1.SetContent(垂直布局_筛选)
}
when 按钮_打开.Click() {
  滑动菜单1.Show()
}
when 按钮_关闭.Click() {
  滑动菜单1.Hide()
}
when 滑动菜单1.Closed() {
  标签1.Text = "筛选面板已关闭"
}

内容布局会移动到弹层，原位置不再显示。先 SetContent 再 Show；Cancelable 控制点击外部或返回时是否关闭。

属性、方法与事件速查

完整参数类型、默认值和平台说明见组件参考。下表按调用入口列出用途；有完成事件的方法在事件中读取结果。

常见问题与验收

完整 .aia 源码与操作指导

下载 .aia 源码

导入 PopupPanelAllFeatures.aia，连接伴侣或编译安装。本轮没有真机／伴侣实测。

初始模式为左侧菜单，不允许点外面关闭。打开后请用菜单内“关闭菜单”返回，也可先勾选“允许点遮罩、返回键及手势关闭”。

API 覆盖 18/18（4 个设计器配置、9 个属性读写入口、3 个方法、2 个事件）；正式编辑器首次导入／保存重开均 0 错误，真实后台导入、安装包编译通过。覆盖检查不替代真机手势测试。

滑动菜单

导入方法：项目 → 导入项目（.aia）→ 选择下载的 .aia 源码文件。 完整覆盖四种模式、替换内容布局、显示／关闭、背景与圆角、是否允许关闭、当前显示状态、打开与关闭事件。面板内既有可点击菜单，也有可填写的筛选表单。 初始是左侧菜单，关闭开关未勾选。面板内始终提供关闭按钮，便于测试禁止遮罩关闭的情况。 | 操作 | 预期结果 | |—|—| | 直接点“打开菜单” | 左侧滑出大学菜单；点内部关闭按钮返回 | | 选择底部／居中／左侧／右侧，再打开 | 观察不同打开方式，属性区显示当前模式 | | 点“切换内容”，再打开 | 换成地区筛选表单；再次切换恢复大学菜单 | | 填地区并点“应用筛选并关闭” | 结果区显示填写的地区；空输入显示全部地区 | | 勾选“允许点遮罩、返回键及手势关闭” | 点空白、按返回键或向外滑动均可关闭 | | 取消上述勾选 | 空白点击、返回键及关闭手势不关闭；内部按钮仍可关闭 | | 拖动圆角滑动条、点“切换背景” | 观察圆角与颜色，属性区显示实际属性值 | | 左侧向左、右侧向右、底部向下滑 | 收回菜单；短滑回弹，居中模式用点击关闭 | | 连续打开与关闭 | 日志分别记录打开／关闭次数；关闭事件在动画完成后出现 | 覆盖检查 18/18：4 个设计器配置、9 个属性读写入口、3 个方法、2 个事件。测试全部功能不需要账号、网络图片或硬件对端。