FlowRowsLayout class may be used to position items from left to right, wrapping to multiple rows when the total width of a row exceeds the width of the container. This layout supports a number of useful options for the spacing and alignment.
This layout is designed to be used with basic containers like
ScrollContainer, which are intended purely for visual layout and do not offer built-in capabilities for rendering data from a collection. If using a container that renders a collection of data — such as
GridView— consider using other layouts that are optimized for data containers by offering performance improvements like layout virtualization.
var container = new LayoutGroup(); this.addChild(container); var child1 = new Button(); child1.text = "One"; container.addChild(child1); var child2 = new Button(); child2.text = "Two"; container.addChild(child2); var child3 = new Button(); child3.text = "Three"; container.addChild(child3);
container.layout = new FlowRowsLayout();
By default, the first child will be positioned in the top-left corner. Each additional child will be positioned to the right of the previous child — creating a horizontal row, until the total width exceeds the width of the parent container. Then, the next child will be positioned below the previous children to start a new row.
The following sections will introduce a number of properties that may be used to adjust the positioning and sizing of children in the layout.
layout.paddingTop = 10.0; layout.paddingRight = 15.0; layout.paddingBottom = 10.0; layout.paddingLeft = 15.0;
If all four padding properties should be set to the same value, call the
setPadding() method instead.
// sets top, right, bottom and left to the same value layout.setPadding(10.0);
layout.horizontalGap = 10.0; layout.verticalGap = 6.0;
If both gap properties should be set to the same value, call the
setGap() method instead.
// sets horizontal and vertical gaps to the same value layout.setGap(10.0);
The children of the container may be aligned within the container's bounds.
To align the children along the x-axis, set the
layout.horizontalAlign = CENTER;
To align the children along the y-axis, set the
layout.verticalAlign = MIDDLE;
Note: Vertical alignment may be used only when the total height of the content (including padding and gap values) is less than or equal to the height of the container. If the content is larger than its parent container, the layout will position the children starting from
0.0on the y-axis, the same as if they were top-aligned.
Since children may be smaller than the height of a row, it is possible to align them within their rows, separately from the alignment of all content within the container. To align the children within their rows, set the
layout.rowVerticalAlign = MIDDLE;