使用 MagicScript 构建 Magic Leap 下拉选择菜单：UiDropDownList 快速上手

原创

Scivaro_科采通

发布于 2025-06-26 15:00:54

12400

代码可运行

运行总次数：0

代码可运行

作者：科采通标签：Magic Leap、MagicScript、空间UI、交互设计、JavaScript

一、前言

在为 Magic Leap 开发 MR 应用时，构建直观易用的 UI 元素至关重要。MagicScript 是 Magic Leap 提供的前端 JavaScript 框架，它专为 Lumin OS 设计，允许开发者使用类似 Web 的语言开发 3D UI 应用。

本文将以一个下拉选择（UiDropDownList）组件为例，展示如何用 MagicScript 快速构建一个交互式的 UI 界面，包括嵌套子项的使用与事件响应。

二、开发环境准备

建议使用以下环境配置进行开发测试：

Magic Leap One 设备
Lumin SDK v0.20.0 下载地址：https://creator.magicleap.com/downloads/lumin-sdk/overview
magic-script-cli v2.0.1 安装命令： bash复制编辑npm install -g magic-script-cli
magic-script-polyfills v2.1.1

三、项目初始化

创建一个 MagicScript 应用项目：

bash复制编辑magic-script init my-drop-down org.magicscript.dd "Drop Down List"
cd my-drop-down

四、核心代码说明（app.js）

我们将构建一个 UI 场景，包含文本显示与多层级下拉列表。

js复制编辑import { LandscapeApp, ui } from 'lumin';

const {
    UiText, UiLinearLayout, UiDropDownList, DropDownListItem,
    EclipseLabelType, Alignment, HorizontalTextAlignment
} = ui;

export class App extends LandscapeApp {
  onAppStart () {
    const prism = this.requestNewPrism([1.5, 1.0, 0.5]);
    const layout = UiLinearLayout.Create(prism);
    layout.setAlignment(Alignment.CENTER_CENTER);

    // 文本标签
    const text = UiText.CreateEclipseLabel(prism, "", EclipseLabelType.kT7);
    text.setAlignment(Alignment.CENTER_CENTER);
    text.setTextAlignment(HorizontalTextAlignment.kCenter);
    layout.addItem(text, [0.005, 0.005, 0.005, 0.005]);

    // 创建下拉菜单
    const list = UiDropDownList.Create(prism, "Company");
    list.onSelectionChangedSub(function(event) {
      const items = list.getSelectedItems();
      if (items.length > 0) {
        text.setText(items[0].label);
      }
    });

    // 下拉选项：Magic Leap
    const sub_ml_item_1 = new DropDownListItem("Rony Abovitz", [], 10);
    const sub_ml_item_2 = new DropDownListItem("Rio Caraeff", [], 11);
    const item_ml = new DropDownListItem("Magic Leap", [sub_ml_item_1, sub_ml_item_2], 1);

    // 下拉选项：Weta Digital
    const sub_weta_item_1 = new DropDownListItem("Jamie Selkirk", [], 20);
    const sub_weta_item_2 = new DropDownListItem("Peter Jackson", [], 21);
    const sub_weta_item_3 = new DropDownListItem("Joe Letteri", [], 22);
    const item_weta = new DropDownListItem("Weta Digital", [sub_weta_item_1, sub_weta_item_2, sub_weta_item_3], 2);

    // 其他选项
    const item_none = new DropDownListItem("None", [], 0);

    list.setList([item_ml, item_weta, item_none]);
    list.setAlignment(Alignment.CENTER_CENTER);
    layout.addItem(list, [0.005, 0.005, 0.005, 0.005]);

    prism.getRootNode().addChild(layout);
  }
}

五、构建与运行

构建项目：

bash复制编辑magic-script build -i

部署到设备运行：

bash复制编辑magic-script run --port=10000

确保 Magic Leap 与开发设备处于同一网络，并启用远程调试模式。

六、交互效果说明

应用启动后，在用户视野中心呈现一个文本与下拉菜单；
下拉菜单支持多层嵌套，例如“Magic Leap”子项下有创始人信息；
选择不同选项，顶部文本会自动更新；
支持通过手势控制器或语音辅助选择操作（需启用语音模块）；

七、延伸建议

你可以在这个基础上：

添加语音控制关键词（结合 VoiceIntent）；
设置选项动态来源（如远程 API）；
将选择结果作为触发动作的参数（如 UI 切换）；
多人交互：结合 MLAPI 共享状态同步。

八、参考资料

🔗 MagicScript 官网：https://www.magicscript.org/
🔗 DropDown 组件 API 文档：
- UiDropDownList
- DropDownListItem

九、总结

通过本示例你可以掌握：

✅ 使用 MagicScript 初始化与构建项目 ✅ 利用 UiDropDownList 实现多层级选择 ✅ 响应用户选择并更新 UI 反馈

对于 MR UI 开发者而言，MagicScript 提供了一种轻量、可定制的空间 UI 方案，特别适合快速原型和产品验证场景。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

手势识别

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度