---
title: UI事件
slug: world-sdk-guide-ch/ui
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

ZEPETOScript 已集成对 Unity UI 系统的支持。

您可以使用不同的 GUI 组件，如面板、按钮、文本输入框和切换菜单，在您的世界中创建用户界面。

要在 ZEPETOScript 中使用 Unity UI 元素，您需要先导入它们。

:::CodeblockTabs
UnityEngine.UI

```typescript
import { Slider, Button } from 'UnityEngine.UI';
```
:::

然后，声明您希望添加的 Unity UI 元素作为属性。

:::CodeblockTabs
TypeScript

```typescript
public sliderUI: Slider;
public btnUI: Button;
```
:::

声明的属性现在在 ZEPETOScript 检查器窗口中可见且可访问。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-VWOAydIB2wgX2H3zwu205-20240904-102415.png)

打开层级窗口，将 Unity UI 组件拖放到 ZEPETOScript 检查器窗口中的每个属性字段中。分配属性值后，您可以在脚本中访问和操作它们。使用此功能为任何控件的事件添加处理程序。

:::CodeblockTabs
EventListener

```typescript
Start() {
    this.btnUI.onClick.AddListener(() => {
        // 添加按钮点击事件
        console.log('btnUI onClick');
    });

    this.sliderUI.onValueChanged.AddListener(v => {
        // 添加滑块事件
        console.log(`[${v}] sliderUI onValueChanged`);
    });
}
```
:::



播放以检查UI事件是否正确处理。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Y-ZOugt_AGkg0u4-auNQt-20240904-102415.png)

检查整个示例代码。

:::CodeblockTabs
UI\_Event

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Slider, Button } from 'UnityEngine.UI';

export default class UIEvent extends ZepetoScriptBehaviour {

    public sliderUI: Slider;
    public btnUI: Button;

    Start() {
        this.btnUI.onClick.AddListener(() => {
            // 添加按钮点击事件
            console.log('btnUI onClick');
        });
        
        this.sliderUI.onValueChanged.AddListener(v => {
            // 添加滑块事件
            console.log(`[${v}] sliderUI onValueChanged`);
        });
    }
}
```
:::



您可以通过点击下面的链接了解更多关于ZEPETOScript提供的Unity UI。

:::hint{type="info"}
**📘 Unity UI**
[https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html](https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html)
:::

:::hint{type="info"}
**📘 交互组件**
[https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html](https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html)
:::