3. 使用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}"
落地方式
- 在 Omniverse Code 或 Isaac Sim 的 Kit 扩展目录中创建
tool_panel_demo文件夹; - 将上述
extension.toml放入根目录,extension.py放入scripts/子目录; - 在 Kit 的 Extension Manager 中点击刷新,找到
tool_panel_demo并启用。
验证方法
- 启用扩展后,观察视口顶部菜单栏出现 窗口 → 工具面板 选项;
- 点击打开面板,确认窗口内显示文本输入框、提交按钮和默认标签“等待输入...”;
- 在输入框中键入任意字符串(如
Hello Kit),点击“提交”按钮; - 判定标准:标签文本变为
你输入了: Hello Kit,且输入框内容保持不变。
界面布局示意
关键说明
本扩展仅实现面板创建与按钮交互这一最小闭环。若需将面板注册为可停靠工具(显示在右侧工具栏),可在 extension.toml 中添加 omni.kit.window.toolbar 依赖,并在 _build_ui 中通过 ui.Window 的 dock_preference 参数指定停靠位置,但这不是本案例目标的必需项。当前实现已满足“带按钮和文本输入的UI窗口并实现交互”的完整要求。