Widget Component Reference

Click the Add Component button at the bottom of the Inspector panel and select UI/Widget to add the Widget component to the node.

To use , please refer to the Widget API documentation and the scene of the test-cases-3d project.

We can create a new Sprite node under the Canvas node, add a Widget component to the Sprite, and do the following test:

Bottom alignment, bottom border distance 50%:

Bottom right alignment, border distance 0 px:

Vertical center alignment and right border distance 50%:

If you align the left and right side at the same time, or align the top and bottom at the same time, then the size will be stretched in the corresponding direction.

Horizontal stretch, left and right margin 10%:

Stretch in the horizontal and vertical directions, margin 50 px:

If Align Mode property is set to ALWAYS, the Widget will set the alignment for the current node every frame at runtime according to the alignment policy you set. The position and size (, height) properties of the node where the component is located may be restricted and cannot be freely modified via the API or animation system.

This is because the alignment set by the widget is processed at the end of each frame, so if you set the previously set alignment related properties in the Widget component, those settings will eventually be reset by the widget component’s own settings.

1. Use Widget’s API to update node’s position and size, for example updating Widget’s top, bottom, , right instead of node’s x, y, width, .

Modify the alignment distance in script code. Example: