Editor API
Return to top
Widget
Edit

UI / Widget

Widget Class ​

Base class of widget

It can attach the root node of leaf node and provide various automatic layout functions.

Common property and methods required for placing widget.

Hierarchy ​

Table of contents ​

Properties ​

onCustomPropertyChange: Readonly<MulticastDelegate<(path: string, value: unknown, oldValue: unknown) => void>> other
Monitor custom attribute synchronization events

Accessors ​

alignPosition(): Readonly<Vector2> other
Get the align position of the widget. When the align method is right align, bottom align, and center align, the value of alignPosition is different from that of position;
autoSizeHorizontalEnable(): boolean other
Get whether to automatically set the size horizontally
autoSizeVerticalEnable(): boolean other
Get whether to set the size automatically vertical
cachedGeometry(): Geometry other
Get the previous Get TickSpaceGeometry
constraints(): Readonly<UIConstraintAnchors> other
Get the layout of the control
desiredSize(): Vector2 other
Obtain expected size
enable(): boolean other
Is it available
guid(): string other
Get the widget GUID
isHovered(): boolean other
Is it hovered
mouseCursor(): MouseCursor other
Get the cursor type on the widget
name(): string other
Get Name
paintSpaceGeometry(): Geometry other
Get the last geometric information used to render the Widget
parent(): Widget other
Get parent node
pivot(): Vector2 other
Get the position of the widget anchor. This property determine the relative position of the widget graph and the anchor; At (0,0), the anchor point is located in the upper left corner of the control; (0.5,0.5), the anchor is at the center of the widget
position(): Readonly<Vector2> other
Get the position of the control
renderOpacity(): number other
Obtain rendering transparency
renderScale(): Vector2 other
Get rendering scaling
renderShear(): Vector2 other
Obtain rendering misalignment deformation
renderTransformAngle(): number other
Obtain the rendering angle
renderTransformPivot(): Vector2 other
Get Render anchor
size(): Vector2 other
Get size
tickSpaceGeometry(): Geometry other
Retrieve the last geometric information used to drive Widget Tick
transform(): Readonly<UITransform> other
Obtain the size and position of the control
visibility(): SlateVisibility other
Get visibility
visible(): boolean other
Is it visible
zOrder(): number other
Get Zorder

Methods ​

addChild(child: Widget): void other
Add child nodes
clone(position: Vector2, Parent?: any): Widget other
Clone the UI widget and its child nodes to the specified parent widget position (default to its parent node)
destroyObject(): void other
Remove and destroy immediately. Cannot be used again
equal(that: Widget): boolean other
Determine if it is the same object
findChildByPath(inPath: string): Widget other
Find nodes by relative path
getChildAt(index: number): Widget other
What is the position node to obtain
getChildByName<T: extends Widget<T>>(name: string): T: extends Widget<T> other
Search for nodes by name
getChildrenCount(): number other
Obtain the number of child nodes
getCustomProperties(): string[] other
Get all customize property
getCustomProperty<T: extends CustomPropertyType>(propertyName: string): T: extends CustomPropertyType other
Get customize property
getCustomPropertyChangeDelegate(property): Readonly<MulticastDelegate<(path: string, value: unknown, oldValue: unknown) => void>> other
Event proxy triggered when a given object property is modified
invalidateLayoutAndVolatility(): void other
Immediately trigger re rendering and layout calculation
removeAllChildren(): void other
Clearing all child nodes will destroy the UI and render it unusable
removeChild(child: Widget): void other
Removing a node will destroy the UI and make it unusable
removeChildAt(index: number): void other
Removing the third node will destroy the UI and render it unusable
removeObject(): void other
Immediately remove and add to the root node for reuse
serialize(): string other
Serialize UI widget
setCustomProperty(propertyName: string, value: undefined CustomPropertyType): void other
Set custom attributes
deserialize(Data: string, Parent?: Widget): Widget other
Deserialize UI

Properties ​

onCustomPropertyChange ​

• onCustomPropertyChange: Readonly<MulticastDelegate<(path: string, value: unknown, oldValue: unknown) => void>> other

Monitor custom attribute synchronization events

ts
this.onCustomPropertyChange.add((path, value, oldValue) => {
    Console. log (the ` property ${path} change, the new value is ${value}, the old value is ${oldValue} `);
});
this.onCustomPropertyChange.add((path, value, oldValue) => {
    Console. log (the ` property ${path} change, the new value is ${value}, the old value is ${oldValue} `);
});

Accessors ​

alignPosition ​

• get alignPosition(): Readonly<Vector2> other

• set alignPosition(inFigmaPosition): void other

Get the align position of the widget. When the align method is right align, bottom align, and center align, the value of alignPosition is different from that of position;

At this point, the coordinate systems used for calculating the two sets of positions are different. For example, when set to bottom right alignment, the alignPosition of the control is calculated based on the parent's bottom right corner as the origin

Returns ​

Readonly<Vector2>Alignment position of controls

Set the align position of the widget. When the align mode is right align, bottom align, and center align, the value of alignPosition is different from that of position;

At this point, the coordinate systems used for calculating the two sets of positions are different. For example, when set to bottom right alignment, the alignPosition of the control is calculated based on the parent's bottom right corner as the origin

Parameters ​

inFigmaPosition Vector2Usage: Alignment position of control

autoSizeHorizontalEnable ​

• get autoSizeHorizontalEnable(): boolean other

• set autoSizeHorizontalEnable(bEnabled): void other

Get whether to automatically set the size horizontally

Returns ​

booleanIs the size automatically set horizontally

Get whether to automatically set the size horizontally

Parameters ​

bEnabledboolean

Is the size automatically set horizontally

autoSizeVerticalEnable ​

• get autoSizeVerticalEnable(): boolean other

• set autoSizeVerticalEnable(bEnabled): void other

Get whether to set the size automatically vertical

Returns ​

booleanWhether to automatically set the size vertically

Get whether to set the size automatically vertical

Parameters ​

bEnabledboolean

Whether to automatically set the size vertically

cachedGeometry ​

• get cachedGeometry(): Geometry other

Get the previous Get TickSpaceGeometry

Returns ​

GeometryReturn to the previous Get TickSpaceGeometry

constraints ​

• get constraints(): Readonly<UIConstraintAnchors> other

• set constraints(ininconstraints): void other

Get the layout of the control

Returns ​

Readonly<UIConstraintAnchors>Layout of controls

Set the layout of the widget

Parameters ​

ininconstraints UIConstraintAnchorsUsage: layout of widget

desiredSize ​

• get desiredSize(): Vector2 other

Obtain expected size

Returns ​

Vector2Return expected size

enable ​

• get enable(): boolean other

• set enable(isEnable): void other

Is it available

Returns ​

booleanboolean

Set availability

Parameters ​

isEnable booleanUsage: availability boolean

Return the setting result

guid ​

• get guid(): string other

Get the widget GUID

Returns ​

stringControl UID

isHovered ​

• get isHovered(): boolean other

Is it hovered

Returns ​

booleanboolean

mouseCursor ​

• get mouseCursor(): MouseCursor other

• set mouseCursor(type): void other

Get the cursor type on the widget

Returns ​

MouseCursorCursor Type

Set cursor type to widget

Parameters ​

typeMouseCursor

name ​

• get name(): string other

• set name(name): void other

Get Name

Returns ​

stringReturn Name

Set name

Parameters ​

name stringUsage: Name

paintSpaceGeometry ​

• get paintSpaceGeometry(): Geometry other

Get the last geometric information used to render the Widget

Returns ​

GeometryReturn the last geometric information used to render the Widget

parent ​

• get parent(): Widget other

Get parent node

Returns ​

WidgetReturn to parent node

pivot ​

• get pivot(): Vector2 other

• set pivot(inPivot): void other

Get the position of the widget anchor. This property determine the relative position of the widget graph and the anchor; At (0,0), the anchor point is located in the upper left corner of the control; (0.5,0.5), the anchor is at the center of the widget

The position of the anchor itself is determined by the position or alignPosition

Returns ​

Vector2Anchor position of the control

Set the position of the widget anchor. This property determine the relative position of the widget graph and the anchor; (0,0), the anchor is located in the upper left corner of the widget; (0.5,0.5), the anchor is at the center of the widget;

The position of the anchor itself is determined by the position or alignPosition

Parameters ​

inPivot Vector2Usage: entered anchor position

position ​

• get position(): Readonly<Vector2> other

• set position(inFigmaPosition): void other

Get the position of the control

Returns ​

Readonly<Vector2>Position of the widget

Set the position of the control

Parameters ​

inFigmaPosition Vector2Usage: position of widget

renderOpacity ​

• get renderOpacity(): number other

• set renderOpacity(InOpacity): void other

Obtain rendering transparency

Returns ​

numberReturn rendering transparency

Set rendering transparency to 0~1

Parameters ​

InOpacity numberUsage: Transparency

renderScale ​

• get renderScale(): Vector2 other

• set renderScale(scale): void other

Get rendering scaling

Returns ​

Vector2Return to render scale

Set render scale

Parameters ​

scale Vector2Usage: Rendering scaling

renderShear ​

• get renderShear(): Vector2 other

• set renderShear(shear): void other

Obtain rendering misalignment deformation

Returns ​

Vector2Return rendering error cut deformation

Set rendering misalignment deformation

Parameters ​

shear Vector2Usage: Rendering Miscut Deformation

renderTransformAngle ​

• get renderTransformAngle(): number other

• set renderTransformAngle(o): void other

Obtain the rendering angle

Returns ​

numberReturn rendering angle

Set the rendering angle

Parameters ​

o numberUsage: rendering angle

renderTransformPivot ​

• get renderTransformPivot(): Vector2 other

• set renderTransformPivot(Pivot): void other

Get Render anchor

Returns ​

Vector2Return to render anchor

Set render anchor

Parameters ​

Pivot Vector2Usage: render anchor

size ​

• get size(): Vector2 other

• set size(inSize): void other

Get size

Returns ​

Vector2FVector2D

Set the size of the widget

Parameters ​

inSize Vector2Usage: Enter size

tickSpaceGeometry ​

• get tickSpaceGeometry(): Geometry other

Retrieve the last geometric information used to drive Widget Tick

Returns ​

GeometryReturn the last geometric information used to drive Widget Tick

transform ​

• get transform(): Readonly<UITransform> other

• set transform(inTransform): void other

Obtain the size and position of the control

Returns ​

Readonly<UITransform>The size and position of the control

Set the size and position of the control

Parameters ​

inTransform UITransformUsage: Size and Position

visibility ​

• get visibility(): SlateVisibility other

• set visibility(Visibility): void other

Get visibility

Returns ​

SlateVisibilityReturn visibility

Set Visible

Parameters ​

Visibility SlateVisibilityUsage: Visibility

visible ​

• get visible(): boolean other

Is it visible

Returns ​

booleanboolean

zOrder ​

• get zOrder(): number other

• set zOrder(InZOrder): void other

Get Zorder

Returns ​

numberzorder

Set Zoder

Parameters ​

InZOrder numberUsage: The higher the value, the higher the level

Methods ​

addChild ​

• addChild(child): void other

Add child nodes

Parameters ​

child WidgetUsage: Child Control

clone ​

• clone(position, Parent?): Widget other

Clone the UI widget and its child nodes to the specified parent widget position (default to its parent node)

Parameters ​

position Vector2Position of generate widget after cloning
Parent? anyThe cloned widget needs to be generate under this widget

Returns ​

WidgetClone generated UI controls

destroyObject ​

• destroyObject(): void other

Remove and destroy immediately. Cannot be used again

equal ​

• equal(that): boolean other

Determine if it is the same object

Parameters ​

that WidgetUsage: Another object that needs to be compared

Returns ​

booleanboolean

findChildByPath ​

• findChildByPath(inPath): Widget other

Find nodes by relative path

Parameters ​

inPath stringUsage: Path range: Unrestricted

Returns ​

WidgetReturn the search node results

getChildAt ​

• getChildAt(index): Widget other

What is the position node to obtain

Parameters ​

index numberUsage: subscript range: greater than 0 type: integer

Returns ​

WidgetWidget found

getChildByName ​

• getChildByName<T>(name): T other

Search for nodes by name

Parameters ​

name stringUsage: Name
Range: Unrestricted

Returns ​

TWidget found

Type parameters ​

Textends Widget<T>

getChildrenCount ​

• getChildrenCount(): number other

Obtain the number of child nodes

Returns ​

numberNumber of child nodes

getCustomProperties ​

• getCustomProperties(): string[] other

Get all customize property

Returns ​

string[]Attribute Name List
ts
const attributes = this.getAttributes();
console.log(attributes);
// ["name", "age"]
const attributes = this.getAttributes();
console.log(attributes);
// ["name", "age"]

getCustomProperty ​

• getCustomProperty<T>(propertyName): T other

Get customize property

Parameters ​

propertyName stringAttribute Name

Returns ​

TProperty value

Type parameters ​

Textends CustomPropertyType

getCustomPropertyChangeDelegate ​

• getCustomPropertyChangeDelegate(property): Readonly<MulticastDelegate<(path: string, value: unknown, oldValue: unknown) => void>> other

Event proxy triggered when a given object property is modified

Parameters ​

property stringName of object property

Returns ​

Readonly<MulticastDelegate<(path: string, value: unknown, oldValue: unknown) => void>>Proxy Object

invalidateLayoutAndVolatility ​

• invalidateLayoutAndVolatility(): void other

Immediately trigger re rendering and layout calculation

removeAllChildren ​

• removeAllChildren(): void other

Clearing all child nodes will destroy the UI and render it unusable

removeChild ​

• removeChild(child): void other

Removing a node will destroy the UI and make it unusable

Parameters ​

child WidgetUsage: Child controls that need to be removed

removeChildAt ​

• removeChildAt(index): void other

Removing the third node will destroy the UI and render it unusable

Parameters ​

index numberUsage: subscript range: greater than 0 type: integer

removeObject ​

• removeObject(): void other

Immediately remove and add to the root node for reuse

serialize ​

• serialize(): string other

Serialize UI widget

Returns ​

stringReturn the JSON string serialized by the incoming widget

setCustomProperty ​

• setCustomProperty(propertyName, value): void other

Set custom attributes

Parameters ​

propertyName stringAttribute Name
value undefined CustomPropertyTypeProperty value

deserialize ​

• Static deserialize(Data, Parent?): Widget other

Deserialize UI

Parameters ​

Data stringUsage: JSON string that needs to be deserialized
Parent? WidgetUsage: The parent node of the generated UI control

Returns ​

WidgetReturn the UI obtained after deserialization of the incoming JSON string