How to use the LayoutGroup component

The LayoutGroup class is a generic container that can position its children using a layout. This container does not support scrolling.

If you need scrolling, you should use the ScrollContainer component instead.

Live preview of the LayoutGroup component

The Basics

Create a LayoutGroup container, add it to the display list, and add some children.

var container = new LayoutGroup();
addChild(container);

var child1 = new Label();
child1.text = "Hello";
container.addChild(child1);

var child2 = new Sprite();
child2.graphics.beginFill(0xcccccc);
child2.graphics.drawRect(0.0, 0.0, 100.0, 100.0);
child2.graphics.endFill();
container.addChild(child2);

A mix of OpenFL's core display objects and other Feathers UI components may be added to a group.

Set the group's layout property to automatically position its children.

container.layout = new HorizontalLayout();

The example above uses HorizontalLayout, but a number of different layouts are available in Feathers UI, and it's possible to create custom layouts.

Styles

LayoutGroup is a light-weight component than offers only minor styling capabilities — mainly, it can display an optional background skin.

Background skin

Optionally give the group a background using the backgroundSkin property. The following example sets it to a RectangleSkin instance.

var skin = new RectangleSkin();
skin.border = SolidColor(1.0, 0x999999);
skin.fill = SolidColor(0xcccccc);
skin.width = 16.0;
skin.height = 16.0;
group.backgroundSkin = skin;

The border and fill properties of the RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.

The group automatically calculates its preferred size based on the initial dimensions of its background skin (accounting for some other factors too, like the size and position of children), so it's important to set a skin's width and height properties to appropriate values to use in this calculation.

See Skinning with common shapes for more details about how to use RectangleSkin with the LineStyle and FillStyle enums that change its border and fill appearance.

The appearance of the group's border or fill may be customized to change when the group is disabled. In the next example, setting the skin's disabledFill method makes it switch to a different fill when the group is disabled.

skin.disabledFill = SolidColor(0xffcccc);

Similarly, use the skin's disabledBorder property to change the border when disabled.

skin.disabledBorder = SolidColor(2.0, 0x999999);

In the examples above, the group uses the same RectangleSkin for all states, and that skin listens for changes to the group's current state. Alternatively, the group's disabledBackgroundSkin method allows the group to display a completely different display object when it is disabled.

var defaultSkin = new RectangleSkin();
// ... set border, fill, width, and height
group.backgroundSkin = defaultSkin;

var disabledSkin = new RectangleSkin();
// ... set border, fill, width, and height
group.disabledBackgroundSkin = disabledSkin;

In the example above, the group will have a separate skins when enabled and disabled.