Ui XML Reference\HStack

Stacks children frames horizontally. This frame type has a default size of 0 and expands to fit any children.

Note that Flex Layouts automatically arrange their children similar to an HStack.

Example Usage

<!-- Legacy version -->
<HStack layout="legacy" spacing="10" padding="10" frameImage="frame01_blue">
    <Frame height="80" width="80" frameImage="cart" />
    <Frame height="90" width="90" frameImage="cart" />
    <Frame height="100" width="100" frameImage="cart" />
    <Frame height="110" width="110" frameImage="cart" />
</HStack>

<!-- Flex version -->
<Frame layout="flex" padding="10" frameImage="frame01_blue">
    <Frame height="80" width="80" frameImage="cart" marginRight="10" />
    <Frame height="90" width="90" frameImage="cart" marginRight="10" />
    <Frame height="100" width="100" frameImage="cart" marginRight="10" />
    <Frame height="110" width="110" frameImage="cart" />
</Frame>

This XML produces the following UI:
image

reverse

Value type: boolean

Supports data binding

Description


The reverse status of the HStack frame, where true reverses the order in which child frames are added (the last created frame will be the first frame displayed) and false displays child frames normally.

Only works in legacy layout. For the flex layout equivalent, see FlexDirection.

Example Usage

<HStack layout="legacy" spacing="10" padding="10" frameImage="frame01_blue" reverse="true">
    <Frame height="80" width="80" frameImage="cart" />
    <Frame height="90" width="90" frameImage="cart" />
    <Frame height="100" width="100" frameImage="cart" />
    <Frame height="110" width="110" frameImage="cart" />
</HStack>