Layout
The StackLayout enables you to control its appearance. It exposes different configuration options which allow customizing the orientation of the component, the alignment of the inner elements and the gap between them.
Orientation
The StackLayout enables you to arrange its content either vertically or horizontally by setting its orientation property.
The following example demonstrates setting the StackLayout orientation.
Gap
In order to set gap between the StackLayout inner elements, utilize the gap property. It accepts values of type number and string. If a number value is provided, it will be treated as pixels. Providing a string value allows setting custom CSS units.
The following example demonstrates how to change the gap.
Alignment
To set the alignment of the inner StackLayout elements, utilize the align property. It accepts an AlignSettings configuration object with horizontal and vertical keys. This allows you to control the alignment based on the X and Y axes.
The available horizontal alignment options are:
start—Uses the start point of the X axis of the container.center—Uses the central point of the X axis of the container.end—Uses the end point of the X axis of the container.stretch(Default)—Stretches the items to fill the width of the container.
The available vertical alignment options are:
top—Uses the start point of the Y axis of the container.middle—Uses the central point of the Y axis of the container.bottom—Uses the end point of the Y axis of the container.stretch(Default)—Stretches the items to fill the height of the container.
The following example demonstrates the different alignment options in action.
Nested StackLayouts
The component enables you to create a more complex layout that includes both horizontal and vertical items by nesting multiple StackLayouts inside one another.