Wrap
Last updated
Last updated
The Wrap widget functions similarly to Row and Column widgets by displaying its children sequentially. In instances where there's insufficient space to display an item, the Wrap widget will automatically position it in a new row or column.
Initially, choose the Container widget either from the "Add Widget" button or directly from the widget tree and set its width to infinity and height to 75% of the page total height.
Next, insert the Wrap widget from the Layout Elements tab within the Container.
Finally, place the Button widget inside the Wrap widget and add multiple buttons.
By default, the main axis for a Wrap Widget is horizontal, determining the horizontal distribution of child widgets within it.
To modify the alignment:
Start: This places the children as close to the start of the main axis as possible.
End: This places the children as close to the end of the main axis as possible.
Center: This places the children as close to the middle of the main axis as possible.
Space Between: This places the free space evenly between the children.
Space Around: This places the free space evenly between the children as well as half of that space before and after the first and last child.
Space Evenly: This places the free space evenly between the children as well as before and after the first and last child
By default, the run axis for a Wrap Widget is vertical, determining the vertical distribution of child widgets within it.
To modify the run alignment:
Locate and select the Wrap widget either from the widget tree or the canvas area.
Navigate to the Property Editor and scroll down to find the Run Alignment section.
Choose from the available options such as Start, Center, End, Space evenly, Space between, and Space around.
In the Wrap widget, adjusting the vertical direction reverses the arrangement of the child elements or flips them by 180 degrees.
Application:
By default, new items are consistently appended in a top-to-bottom direction. However, there might be rare instances where you need to alter this default behavior.
To add items from bottom to top:
Select the Wrap widget from either the widget tree or the canvas area.
Navigate to the Property Editor and locate the Vertical Direction setting.
Adjust the dropdown value to "Up".
After making this adjustment, proceed to add items accordingly.
When multiple items are added to the Wrap widget, exceeding the size of the parent widget, the Wrap widget will continue displaying the overflow. Yet, you have the option to conceal the overflowing items by adjusting the Clip Behaviour property:
Choose the Wrap from the widget tree or canvas area.
Access the Property Editor and locate the Clip Behaviour option.
Modify it to "Clip Content".
The "Spacing" property in Wrap determines the gap between child widgets in rows, while "Run Spacing" regulates the space between rows or columns.
