You control the way the container lays out children with
different sizes by using the VerticalLayout.variableRowHeight and HorizontalLayout.variableColumnWidth properties.
By default, these properties are set to true which
lets each child determine its height (VerticalLayout)
or width (HorizontalLayout).
In the following example, the Group container
holds four buttons. By default, buttons use a 12 point font size.
However, two of the buttons in this example define a larger font
size. Because the variableRowHeight property is
set to true by default, the container sets the
height of each button appropriately for its font size:
Variable row and column sizes
If your container has many children, setting the variableRowHeight or variableColumnWidth properties
to true can affect application performance. The
reason is because the container calculates the size of every child
as it appears on the screen.
Rather than having each child calculate its size, you can set
the variableRowHeight or variableColumnWidth property
to false so that each child has the same size.
Note: The following paragraphs describe setting the variableRowHeight property
for the VerticalLayout class. This discussion is the same as setting
the variableColumnWidth property for the HorizontalLayout
If you set the variableRowHeight
property to false
the VerticalLayout class uses the following procedure to determine
the height of each child:
If specified, use the VerticalLayout.rowHeight property
to specify an explicit height of all children. Make sure that the
specified height is suitable for all children.
If specified, use the VerticalLayout.typicalLayoutElement property
to define the height of all children. This property references a component
that Flex uses to define the height of all container children.
Use the preferred height of the first container child as
the height of all container children. This technique is useful if
the children of the container are all similar.
In the following example, a group container uses the VerticalLayout
class to lay out four Button controls. The variableRowHeight property
is false so that every button has the same height:
Because you did not specify an explicit value for the VerticalLayout.rowHeight property
or the VerticalLayout.typicalLayoutElement property,
the VerticalLayout class uses the preferred height of the first
button control as the height for all container children. However,
because the third button and fourth button controls define a large
font size, the text is truncated to the size of the button.
Alternatively, you can set the rowHeight property
to a pixel value large enough for all the children, as the following
In this example, all buttons are 40 pixels tall.
The following example uses the typicalLayoutElement property
to specify to use the third button to determine the height of all
You can use two common strategies for determining the typical
item. One option is to use the largest item as the typical item.
Another option is to calculate the average size of all items, and
use the data item closest to that average size.