当前位置: 首页 > article >正文

【Unity基础】初识UI Toolkit - 运行时UI

Unity中的UI工具包(UI Toolkit)不但可以用于创建编辑器UI,同样可以来创建运行时UI。

关于Unity中的UI系统以及使用UI工具包创建编辑器UI可以参见:

1. Unity中的UI系统

2. 初识UI Toolkit - 编辑器UI

本文将通过一个简单示例来介绍如何使用UI工具包来创建运行时UI。

一、创建UI Document(.uxml)

1. 使用任意模板新建一个Unity项目。

2. 在Project中,右键点击Scene,选择Create > UI Toolkit > UI Document,命名为SimpleRuntimeUI

3. 在Project里,点击SimpleRuntimeUI右侧箭头展开后,双击inlineStyle,在文本编辑器里打开。并将文件内容替换为下面代码。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements"

        xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements"

        noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">

    <ui:VisualElement style="flex-grow: 1;">

        <ui:Label text="This is a Label" display-tooltip-when-elided="true"/>

        <ui:Button text="This is a Button" display-tooltip-when-elided="true" name="button"/>

        <ui:Toggle label="Display the counter?" name="toggle"/>

        <ui:TextField picking-mode="Ignore" label="Text Field" text="filler text" name="input-message" />

    </ui:VisualElement>

</ui:UXML>

二、将UI Document与场景关联

1. 在场景中,选择菜单GameObject > UI Toolkit > UI Document,新建一个对象。在Hierarchy中选择UIDocument,将Project中的SimpleRuntimeUI.uxml拖到Inspector中的Source Asset中。

三、创建MonoBehaviour脚本

1. 选择菜单Assets > Create > Scripting > Monobehaviour Script,创建脚本并命名为SimpleRuntimeUI.cs

2. 双击SimpleRuntimeUI.cs,打开后将内容替换为下面代码。

using UnityEngine;

using UnityEngine.UIElements;

public class SimpleRuntimeUI : MonoBehaviour

{

    private Button _button;

    private Toggle _toggle;

    private int _clickCount;

    //Add logic that interacts with the UI controls in the `OnEnable` methods

    private void OnEnable()

    {

        // The UXML is already instantiated by the UIDocument component

        var uiDocument = GetComponent<UIDocument>();

        _button = uiDocument.rootVisualElement.Q("button") as Button;

        _toggle = uiDocument.rootVisualElement.Q("toggle") as Toggle;

        _button.RegisterCallback<ClickEvent>(PrintClickMessage);

        var _inputFields = uiDocument.rootVisualElement.Q("input-message");

        _inputFields.RegisterCallback<ChangeEvent<string>>(InputMessage);

    }

    private void OnDisable()

    {

        _button.UnregisterCallback<ClickEvent>(PrintClickMessage);

    }

    private void PrintClickMessage(ClickEvent evt)

    {

        ++_clickCount;

        Debug.Log($"{"button"} was clicked!" +

                (_toggle.value ? " Count: " + _clickCount : ""));

    }

    public static void InputMessage(ChangeEvent<string> evt)

    {

        Debug.Log($"{evt.newValue} -> {evt.target}");

    }

}

3. 保存文件并返回Unity。在Hierarchy中选择UIDocument,将Project中的SimpleRuntimeUI拖到Inspector的空白处,给UIDocument添加脚本组件。

4. 点击“运行”,在Game窗口中就可以看到如下UI。点击Button,可以在控制台看到输出的消息。


http://www.kler.cn/a/371544.html

相关文章:

  • asp.net WebForm GridView高级应用
  • Qt学习笔记第31到40讲
  • QT 中彻底解决中文乱码问题的指南
  • 部署MiniCPM-V
  • 行业首发|美格智能创新推出5G+Wi-Fi 7智能终端解决方案,端侧AI助力数智升维
  • ts 中 enum 作为对象的 key
  • 【项目复现】——DDoS-SDN Detection Project
  • Nginx + Lua + Redis:打造智能 IP 黑名单系统
  • 「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
  • Conditional DETR论文笔记
  • Java基础(4)之正则,异常与文件IO流
  • KAN原作论文github阅读(readme)
  • 深度解读GaussDB逻辑解码技术原理
  • 使用 OpenCV 进行人眼检测
  • springboot天气预报推送小程序-计算机毕业设计源码41533
  • 青少年编程与数学 02-002 Sql Server 数据库应用 15课题、备份与还原
  • C++初阶(七)--类和对象(4)
  • 临接矩阵m
  • 随机题两题
  • 开源项目-投票管理系统
  • 苹果生态的机器学习和同态加密
  • Android 玩机知识储备
  • Java国际版同城打车顺风车滴滴车跑腿系统小程序源码
  • 《 Python 与股票大盘信息的奇妙之旅》
  • 深度学习案例:带有一个隐藏层的平面数据分类
  • 等保行业如何面对新兴安全威胁