HStack and VStack#

An HStack and a VStack are used to place other widgets in columns (HStack) or in rows (VStack). Both can be nested as much as needed to produce the desired layout.

Example HStack and VStacks

Create HStacks and VStacks#

The following code shows how to create nested rows of HStack within a VStack to create a sparse grid.

stacks_window = ui.Window("Example Stacks Window", width=310, height=530)
with stacks_window.frame:
    with ui.VStack():
        ui.Label("Very Top Label", alignment=ui.Alignment.CENTER)

        with ui.HStack():
            ui.Button("Top Left", width=100, height=100)
            ui.Button("Top Center", width=100, height=100)
            ui.Button("Top Right", width=100, height=100)
        with ui.HStack():
            ui.Button("Middle Left", width=100, height=100)
            ui.Spacer(width=100, height=100)
            ui.Button("Middle Right", width=100, height=100)
        with ui.HStack():
            ui.Button("Bottom Left", width=100, height=100)
            ui.Button("Bottom Center", width=100, height=100)

        ui.Label("Very Bottom Label", alignment=ui.Alignment.CENTER)

Data Model#

Since an HStack and a VStack are just used for defining the layout of other widgets, there is no data model associated with them.

Keyword Arguments:#

Show...

direction :

This type is used to determine the direction of the layout. If the Stack’s orientation is eLeftToRight the widgets are placed in a horizontal row, from left to right. If the Stack’s orientation is eRightToLeft the widgets are placed in a horizontal row, from right to left. If the Stack’s orientation is eTopToBottom, the widgets are placed in a vertical column, from top to bottom. If the Stack’s orientation is eBottomToTop, the widgets are placed in a vertical column, from bottom to top. If the Stack’s orientation is eBackToFront, the widgets are placed sorted in a Z-order in top right corner. If the Stack’s orientation is eFrontToBack, the widgets are placed sorted in a Z-order in top right corner, the first widget goes to front.

content_clipping :

Determines if the child widgets should be clipped by the rectangle of this Stack.

spacing :

Sets a non-stretchable space in pixels between child items of this layout.

send_mouse_events_to_back :

When children of a Z-based stack overlap mouse events are normally sent to the topmost one. Setting this property true will invert that behavior, sending mouse events to the bottom-most child.

width : ui.Length

This property holds the width of the widget relative to its parent. Do not use this function to find the width of a screen.

height : ui.Length

This property holds the height of the widget relative to its parent. Do not use this function to find the height of a screen.

name : str

The name of the widget that user can set.

style_type_name_override : str

By default, we use typeName to look up the style. But sometimes it’s necessary to use a custom name. For example, when a widget is a part of another widget. (Label is a part of Button) This property can override the name to use in style.

identifier : str

An optional identifier of the widget we can use to refer to it in queries.

visible : bool

This property holds whether the widget is visible.

visibleMin : float

If the current zoom factor and DPI is less than this value, the widget is not visible.

visibleMax : float

If the current zoom factor and DPI is bigger than this value, the widget is not visible.

tooltip : str

Set a basic tooltip for the widget, this will simply be a Label, it will follow the Tooltip style

tooltip_fn : Callable

Set dynamic tooltip that will be created dynamiclly the first time it is needed. the function is called inside a ui.Frame scope that the widget will be parented correctly.

tooltip_offset_x : float

Set the X tooltip offset in points. In a normal state, the tooltip position is linked to the mouse position. If the tooltip offset is non zero, the top left corner of the tooltip is linked to the top left corner of the widget, and this property defines the relative position the tooltip should be shown.

tooltip_offset_y : float

Set the Y tooltip offset in points. In a normal state, the tooltip position is linked to the mouse position. If the tooltip offset is non zero, the top left corner of the tooltip is linked to the top left corner of the widget, and this property defines the relative position the tooltip should be shown.

enabled : bool

This property holds whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. And widgets display themselves differently when they are disabled.

selected : bool

This property holds a flag that specifies the widget has to use eSelected state of the style.

checked : bool

This property holds a flag that specifies the widget has to use eChecked state of the style. It’s on the Widget level because the button can have sub-widgets that are also should be checked.

dragging : bool

This property holds if the widget is being dragged.

opaque_for_mouse_events : bool

If the widgets has callback functions it will by default not capture the events if it is the top most widget and setup this option to true, so they don’t get routed to the child widgets either

skip_draw_when_clipped : bool

The flag that specifies if it’s necessary to bypass the whole draw cycle if the bounding box is clipped with a scrolling frame. It’s needed to avoid the limitation of 65535 primitives in a single draw list.

mouse_moved_fn : Callable

Sets the function that will be called when the user moves the mouse inside the widget. Mouse move events only occur if a mouse button is pressed while the mouse is being moved. void onMouseMoved(float x, float y, int32_t modifier)

mouse_pressed_fn : Callable

Sets the function that will be called when the user presses the mouse button inside the widget. The function should be like this: void onMousePressed(float x, float y, int32_t button, carb::input::KeyboardModifierFlags modifier) Where ‘button’ is the number of the mouse button pressed. ‘modifier’ is the flag for the keyboard modifier key.

mouse_released_fn : Callable

Sets the function that will be called when the user releases the mouse button if this button was pressed inside the widget. void onMouseReleased(float x, float y, int32_t button, carb::input::KeyboardModifierFlags modifier)

mouse_double_clicked_fn : Callable

Sets the function that will be called when the user presses the mouse button twice inside the widget. The function specification is the same as in setMousePressedFn. void onMouseDoubleClicked(float x, float y, int32_t button, carb::input::KeyboardModifierFlags modifier)

mouse_wheel_fn : Callable

Sets the function that will be called when the user uses mouse wheel on the focused window. The function specification is the same as in setMousePressedFn. void onMouseWheel(float x, float y, carb::input::KeyboardModifierFlags modifier)

mouse_hovered_fn : Callable

Sets the function that will be called when the user use mouse enter/leave on the focused window. function specification is the same as in setMouseHovedFn. void onMouseHovered(bool hovered)

drag_fn : Callable

Specify that this Widget is draggable, and set the callback that is attached to the drag operation.

accept_drop_fn : Callable

Specify that this Widget can accept specific drops and set the callback that is called to check if the drop can be accepted.

drop_fn : Callable

Specify that this Widget accepts drops and set the callback to the drop operation.

computed_content_size_changed_fn : Callable

Called when the size of the widget is changed.

On this page