HorizontalDistributedLayout class may be used to position the children of a container from left to right, in a single row — where the total width of the container is distributed equally to the widths of each child. In other words, each child will have the same width, and their sum is equal to the total width of the container.
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(); 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 HorizontalDistributedLayout();
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 single, horizontal 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);
gap refers to the space, measured in pixels, between each child in the container.
layout.gap = 5.0;