Auto Layout Container

    For the next layout types, the node structure is as follows:

    Auto layout components have several basic layout types. These can be set up by the property, which includes the following types.

    horizontal-no-align

    When Layout Type is set to Horizontal, all child nodes will be automatically aligned horizontally and the component will modify the position or height of the node on the y-axis by default. If the child node needs to be placed outside the height range of the Layout node’s bounding box, you can uncheck AutoAlignment (as shown above).

    The situation that the content exceeds the container easily under horizontal sorting, the following measures can be taken as needed.

    • If the content object is always to remain inside the container, you can set ResizeMode to Children, which will limit the size of the content object to the container (right in the figure below).

    • If you want the child nodes to be aligned upwards on the y-axis, you can add a widget component to the child node and turn on the Top or Bottom alignment mode.

    Horizontal Direction

    In the horizontal layout, you can set the horizontal orientation with HorizontalDirection. There are two types of orientation: LEFT_TO_RIGHT and RIGHT_TO_LEFT. The former will arrange the nodes from left to right according to their display order in Hierarchy. The latter will arrange the nodes from right to left according to their display order.

    The layout and orientation of vertical layout is almost the same as horizontal layout, only the orientation is different.

    Layout Type set to will start the grid layout. The grid layout will determine the starting point of the layout based on the combination of HorizontalDirection and VerticalDirection within a fixed container size, and the layout direction based on the StartAxis property.

    Grid Direction

    • Start axis
      • Set to either HORIZONTAL or VERTICAL orientation. The former will be aligned horizontally, the latter vertically.

    Two examples are given in conjunction with alignment directions:

    • If the is set to LEFT_TO_RIGHT, VerticalDirection is TOP_TO_BOTTOM and StartAxis is HORIZONTAL. This tells the component to be sorted horizontally starting from the top left of the container (below left).

    • If the currently set HorizontalDirection is RIGHT_TO_LEFT, VerticalDirection is BOTTOM_TO_TOP and StartAxis is VERTICAL, it is telling the component to be sorted vertically starting from the BOTTOM RIGHT of the container (right in the figure below).

      grid-layout

    Grid sorting may also cause the content to exceed the container, which can also be solved by using the Children and Container modes of ResizeMode mentioned in Horizontal Layout.

    For more information, please refer to the Layout component documentation.