How to use VerticalListFixedRowLayout with Feathers UI containers

The VerticalListFixedRowLayout class may be used to position the children of a data container from top to bottom, in a single column, where each item has the same fixed height and fills the entire width of the container. This layout is better optimized for performance than the default VerticalListLayout that supports items with variable heights.

The Basics

Create a ListView container, set its data provider, and add it to the display list.

var container = new ListView();
container.dataProvider = new ArrayCollection([
    {text: "A"},
    {text: "B"},
    {text: "C"}
]);
addChild(container);

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

container.layout = new VerticalListFixedRowLayout();

By default, the first child will be positioned in the top-left corner and fill the entire width of the container. Each additional child will be positioned below the previous child — creating a single, vertical column. All children will have the exact same height, derived from the height of the first child.

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;

Number of rows

If the parent container does not have an explicit height value, the layout will calculate its ideal height automatically. To display a specific number of rows, regardless of the height of each row, set the requestedRowCount property.

layout.requestedRowCount = 4.0;

An integer value is not required, so a partial row may be made visible at the bottom of the list, if desired.

layout.requestedRowCount = 4.5;

If the container contains more children than the number of visible rows, the container will enable scrolling, if supported.

Row height

By default, the height of all children in a VerticalListFixedRowLayout is determined by the height of the first child. However, the rowHeight property may be used to provide a custom height.

layout.rowHeight = 20.0;

In the example above, the height of the children in the container is set to 20.0 pixels.