Skip to content
UserWidget

界面 / UserWidget

UserWidget Class

自定义控件

UI控件的集合,预制体UI

Hierarchy

Table of contents

Accessors

focusable(): boolean client
获取是否响应键盘焦点事件
rootContent(): Canvas client
获取根Canvas
safeAreaEnable(): boolean client
是否适配安全区
click

Accessors

autoSizeHorizontalEnable(): boolean client
获取是否自动水平设置大小
autoSizeVerticalEnable(): boolean client
获取是否自动垂直设置大小
cachedGeometry(): Geometry client
获取上一次的GetTickSpaceGeometry
constraints(): Readonly<UIConstraintAnchors> client
获取控件的布局
desiredSize(): Vector2 client
获取期望大小
enable(): boolean client
是否可用
guid(): string client
获取控件GUID
isHovered(): boolean client
是否是hovered
mouseCursor(): MouseCursor client
获取控件上光标类型
name(): string client
获取名字
onFocusChange(): Delegate<(absolutionPosition: Vector2) => boolean> client
焦点改变事件
onFoucsLost(): Delegate<(absolutionPosition: Vector2) => boolean> client
丢失焦点事件
onKeyDownEvent(): Delegate<(absolutionPosition: Vector2, keyEvent: KeyEvent) => boolean> client
按键按下事件
onKeyUpEvent(): Delegate<(absolutionPosition: Vector2, keyEvent: KeyEvent) => boolean> client
按键抬起事件
onMouseButtonDoubleClick(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
鼠标双击事件
onMouseButtonDown(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
鼠标按下事件
onMouseButtonUp(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
鼠标抬起事件
onMouseEnter(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
鼠标进入控件事件
onMouseLeave(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
鼠标离开控件事件
onMouseMove(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
鼠标移动事件
onMouseWheel(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
鼠标滚轮滚动事件
onTouchEnded(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
触摸结束事件
onTouchMoved(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
触摸移动事件
onTouchStarted(): Delegate<(absolutionPosition: Vector2, pointEvent: PointerEvent) => boolean> client
触摸按下事件
paintSpaceGeometry(): Geometry client
获取最后一次用于渲染Widget的几何信息
parent(): Widget client
获取父节点
position(): Readonly<Vector2> client
获取控件的位置
renderOpacity(): number client
获取渲染透明度
renderScale(): Vector2 client
获取渲染缩放
renderShear(): Vector2 client
获取渲染错切形变
renderTransformAngle(): number client
获取渲染的角度
renderTransformPivot(): Vector2 client
获取渲染锚点
size(): Vector2 client
获取大小
tickSpaceGeometry(): Geometry client
获取最后一次用于驱动Widget Tick的几何信息
transform(): Readonly<UITransform> client
得到控件的大小和位置
visibility(): SlateVisibility client
获取可见性
visible(): boolean client
是否可见
zOrder(): number client
获取zorder

Methods

addToViewport(zOrder: number): void client
添加到屏幕上
removeRootContent(): void client
移除根Canvas,会销毁根Canvas,无法再次使用
newObject(parent?: Canvas): UserWidget client
创建 UserWidget 控件
click

Methods

addChild(child: Widget): void client
添加子节点
destroyObject(): void client
立刻移除并销毁 不可以在使用
equal(that: Widget): boolean client
判断是不是同一个对象
findChildByPath(inPath: string): Widget client
通过相对路径查找节点
getChildAt(index: number): Widget client
获取第几位子节点
getChildByName<T: extends Widget<T>>(name: string): T: extends Widget<T> client
通过名字查找节点
getChildrenCount(): number client
获取子节点数量
invalidateLayoutAndVolatility(): void client
立刻触发重新渲染的和排布计算
removeAllChildren(): void client
清除所有子节点,会销毁UI无法再使用
removeChild(child: Widget): void client
移除节点,会销毁UI无法在使用
removeChildAt(index: number): void client
移除第几个节点,会销毁UI无法再使用
removeObject(): void client
立刻移除并添加到根节点 可以再使用

Accessors


focusable

get focusable(): boolean client

set focusable(isFocus): void client

获取是否响应键盘焦点事件

Returns

boolean返回相应键盘的焦点事件

设置是否响应键盘焦点事件

Parameters

isFocus boolean是否相应

rootContent

get rootContent(): Canvas client

set rootContent(content): void client

获取根Canvas

Returns

Canvas返回根Canvas

设置UI的根Canvas

Parameters

content Canvas根UI的内容

safeAreaEnable

get safeAreaEnable(): boolean client

set safeAreaEnable(isEnable): void client

是否适配安全区

Returns

boolean是否适配

是否适配安全区

Parameters

isEnable boolean是否适配

Methods


addToViewport

addToViewport(zOrder): void client

添加到屏幕上

Parameters

zOrder number添加到屏幕的层级关系 range:不做限制 type:整数
使用示例:创建一个名为AccountExample的脚本,放置在对象栏中,打开脚本,将原本内容修改为如下内容,保存并运行游戏,会在屏幕右上方显示用户的头像,PC环境下为白图
ts
@Component
export default class AccountExample extends Script {

    protected onStart(): void {
        if (!SystemUtil.isClient()) return;
        let button = new ButtonUI();
    }
}

class ButtonUI {
    public button:StaleButton;

    constructor() {
        this.creatUI();
    }

    private creatUI() {
        let size = WindowUtil.getViewportSize();

        // 创建一个UI对象
        let ui = UserWidget.newObject();
        // 将UI添加到屏幕上
        ui.addToViewport(1);

        // 创建一个画布组件
        let canvas = Canvas.newObject();
        canvas.size = new Vector2(1920, 1080);
        canvas.position = Vector2.zero;
        // 将Ui的根画布设置为canvas
        ui.rootContent = canvas;

        this.button = StaleButton.newObject(canvas);
        this.button.size = new Vector2(size.x / 14, size.y / 20);
        this.button.text = "StaleButton";
        this.button.fontSize = 18;
        this.button.transitionEnable = true;
        InputUtil.bindButton(Keys.X, this.button);
        this.button.setPressedImageColorDecimal(200, 200, 200, 255);
        this.button.onClicked.add(() => {
        // 当按下按钮执行以下逻辑
            console.log("The \"StaleButton\" button was pressed ~");
        })
    }
}
@Component
export default class AccountExample extends Script {

    protected onStart(): void {
        if (!SystemUtil.isClient()) return;
        let button = new ButtonUI();
    }
}

class ButtonUI {
    public button:StaleButton;

    constructor() {
        this.creatUI();
    }

    private creatUI() {
        let size = WindowUtil.getViewportSize();

        // 创建一个UI对象
        let ui = UserWidget.newObject();
        // 将UI添加到屏幕上
        ui.addToViewport(1);

        // 创建一个画布组件
        let canvas = Canvas.newObject();
        canvas.size = new Vector2(1920, 1080);
        canvas.position = Vector2.zero;
        // 将Ui的根画布设置为canvas
        ui.rootContent = canvas;

        this.button = StaleButton.newObject(canvas);
        this.button.size = new Vector2(size.x / 14, size.y / 20);
        this.button.text = "StaleButton";
        this.button.fontSize = 18;
        this.button.transitionEnable = true;
        InputUtil.bindButton(Keys.X, this.button);
        this.button.setPressedImageColorDecimal(200, 200, 200, 255);
        this.button.onClicked.add(() => {
        // 当按下按钮执行以下逻辑
            console.log("The \"StaleButton\" button was pressed ~");
        })
    }
}

removeRootContent

removeRootContent(): void client

移除根Canvas,会销毁根Canvas,无法再次使用


newObject

Static newObject(parent?): UserWidget client

创建 UserWidget 控件

Parameters

parent? Canvas创建控件的外Outer对象 default:null

Returns

UserWidget返回创建的控件