Skip to main content

HStackComponent

extends HorizontalOrVerticalLayoutComponent

The HStackComponent is essentially just a wrapper around Unity's HorizontalLayoutGroup.

The UI.HStack(...) builder is a very convenient shorthand, allowing you to syntactially and semantically encapuslate all of the stack's content.

note

Any component inherting from LayoutComponent automatically fits itself to the size of its children. This is done via a ContentSizeFitter component. If you don't want this, simply call .Size(x,y) (or the related .Width(x) or .Height(y)) and the layout will instead conform to that size.

Examples​

Simple UI Builder
UI.HStack(s => {
    // use .Add(BaseComponent) to add any arbitrary content
    s.Add(UI.Text("Hello from the left!"));

    // you can also create the elements first, then add them later ...
    TextComponent smiley = UI.Text("O_o");
    ImageComponent icon = UI.Image(_smileySprite);
    // ... and they don't even have to be of the same type inside 
    // the function call as it uses params syntax
    s.Add(smiley, icon);
})
.Parent(canvas);

UI.HStack(s => {
    s.Add(UI.Text("Hello from the right!"));
    s.Add(UI.Text("Hello from the left!"));
})
.ReverseArrangement()
.Parent(canvas);
tip

By default elements are ordered from left to right in a HStack based on the order you add them to the stack.

If you want to reverse that arrangement you can simply call .ReverseArrangement() on the stack to order them the other way!

As any layout component can contain any type of contents, you can make the contents as complex as you'd like!

More Complex Example
float spacing = 20f;
// set spacing between the elements vertically
UI.HStack(spacing, hs => {
    
    // add entire sub-hierarchies!
    hs.Add(
        // set spacing and the alignment of the children inside
        UI.VStack(spacing, TextAnchor.LeftCenter, vs => {
            vs.Add(UI.Text("Profile"));
            vs.Add(UI.Image(_profileSprite));
        })
    );

    // push all previous elements to the left, all upcoming ones to the right
    hs.Spacer(); 

    hs.Add(UI.Button("Click!", () => {
        // ...
    }))

    // push all previous elements to the left, all upcoming ones to the right
    hs.Spacer();

    hs.Add(
        UI.Button(() => {
            // ...
        }, label => {
            label.Label("Home", _houseSprite)
        });
    );

})
.Size(canvas.GetWidth(), canvas.GetHeight())
.Parent(canvas);
tip

Spacers can be extremely useful when it comes to formatting your layouts. Learn more about them here.

They idea takes very strong inspriation from SwiftUI's Spacers again, so if you are familar with them UCGUI's Spacers work pretty much identically.

Implementation​