How to use FormLayout with Feathers UI containers

The FormLayout class is designed to be used with the Form component.

The Basics

Create a Form container, add it to the display list, and then add a few children to the container.

var form = new Form();
addChild(container);

var item1 = new FormItem();
item1.text = "One";
form.addChild(item1);

var item2 = new FormItem();
item2.text = "Two";
form.addChild(item2);

var item3 = new FormItem();
item3.text = "Three";
form.addChild(item3);

Set the container's layout property to a new FormLayout instance.

form.layout = new FormLayout();

The following sections will introduce a number of properties that may be used to adjust the positioning and sizing of children in the layout.

Spacing

The padding is the space around the edges of the container that will contain no children. Padding may be added on each side, including top, right, bottom, and left.

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);

The gap refers to the space, measured in pixels, between each child in the container.

layout.gap = 5.0;

Alignment

The children of the container may be aligned vertically within the container's bounds.

To align the children along the y-axis, set the verticalAlign property.

layout.verticalAlign = MIDDLE;

In the example above, the children are aligned to the middle of the y-axis. They may also be aligned to the top or to the bottom.

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.0 on the y-axis, the same as if they were top-aligned.