How to use the LayoutGroup component
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
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.
LayoutGroup is a light-weight component than offers only minor styling capabilities — mainly, it can display an optional background skin.
Optionally give the group a background using the
backgroundSkin property. The following example sets it to a
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;
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
height properties to appropriate values to use in this calculation.
See Skinning with common shapes for more details about how to use
FillStyleenums 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.