3. 使用UI窗口创建工具面板

使用UI窗口创建工具面板 学习卡片

任务说明

本案例目标是在 Omniverse Kit 扩展中创建一个可停靠的 UI 工具面板,包含一个文本输入框和一个按钮。当用户在文本框中输入内容并点击按钮后,面板下方的标签会实时显示输入内容,实现基本交互闭环。

实现方案

采用 Kit 扩展标准结构,使用 omni.ui 构建界面。扩展启动时创建窗口,窗口内垂直排列文本输入框、按钮和结果标签。按钮点击事件从输入框读取文本并写入标签。

代码实现

# 文件: extension.toml
[package]
name = "tool_panel_demo"
version = "1.0.0"
description = "UI tool panel demo"

[dependencies]
omni.kit.app = { version = ">=1.0.0" }
omni.ui = { version = ">=2.0.0" }
# 文件: scripts/extension.py
import omni.ext
import omni.ui as ui
import carb

class ToolPanelExtension(omni.ext.IExt):
    def on_startup(self, ext_id: str):
        self._window = None
        self._input_field = None
        self._result_label = None
        self._build_ui()

    def on_shutdown(self):
        if self._window:
            self._window.destroy()
            self._window = None

    def _build_ui(self):
        self._window = ui.Window("工具面板", width=320, height=200)
        with self._window.frame:
            with ui.VStack(spacing=8, padding=12):
                # 文本输入框
                self._input_field = ui.StringField()

                # 按钮
                ui.Button("提交", clicked_fn=self._on_button_clicked)

                # 结果显示标签
                self._result_label = ui.Label("等待输入...", word_wrap=True)

    def _on_button_clicked(self):
        """读取输入框内容并更新标签"""
        if self._input_field and self._result_label:
            text = self._input_field.model.get_value_as_string()
            self._result_label.text = f"你输入了: {text}"

落地方式

  1. 在 Omniverse Code 或 Isaac Sim 的 Kit 扩展目录中创建 tool_panel_demo 文件夹;
  2. 将上述 extension.toml 放入根目录,extension.py 放入 scripts/ 子目录;
  3. 在 Kit 的 Extension Manager 中点击刷新,找到 tool_panel_demo 并启用。

验证方法

  1. 启用扩展后,观察视口顶部菜单栏出现 窗口 → 工具面板 选项;
  2. 点击打开面板,确认窗口内显示文本输入框、提交按钮和默认标签“等待输入...”;
  3. 在输入框中键入任意字符串(如 Hello Kit),点击“提交”按钮;
  4. 判定标准:标签文本变为 你输入了: Hello Kit,且输入框内容保持不变。

界面布局示意

工具面板 在此输入文本... 提交 你输入了: Hello Kit StringField Button Label

关键说明

本扩展仅实现面板创建与按钮交互这一最小闭环。若需将面板注册为可停靠工具(显示在右侧工具栏),可在 extension.toml 中添加 omni.kit.window.toolbar 依赖,并在 _build_ui 中通过 ui.Window 的 dock_preference 参数指定停靠位置,但这不是本案例目标的必需项。当前实现已满足“带按钮和文本输入的UI窗口并实现交互”的完整要求。