Container Controls

Guidelines for container controls

Qt Quick Controls offers a selection of container-like controls.

qml-qtquick-controls-applicationwindow.html

Styled top-level window with support for a header and footer.

qml-qtquick-controls-container.html

Abstract base type providing functionality common to containers.

qml-qtquick-controls-frame.html

Visual frame for a logical group of controls.

qml-qtquick-controls-groupbox.html

Visual frame and title for a logical group of controls.

qml-qtquick-controls-horizontalheaderview.html

Provides a horizontal header view to accompany a TableView.

qml-qtquick-controls-verticalheaderview.html

Offers a vertical header view to accompany a TableView.

qml-qtquick-controls-page.html

Styled page control with support for a header and footer.

qml-qtquick-controls-pane.html

Provides a background matching with the application style and theme.

qml-qtquick-controls-scrollview.html

Scrollable view.

qml-qtquick-controls-splitview.html

Lays out items with a draggable splitter between each item.

qml-qtquick-controls-stackview.html

Provides a stack-based navigation model.

qml-qtquick-controls-swipeview.html

Enables the user to navigate pages by swiping sideways.

qml-qtquick-controls-tabbar.html

Allows the user to switch between different views or subtasks.

qml-qtquick-controls-toolbar.html

Container for context-sensitive controls.

Each type of container can be used to group a set of controls together. The following sections offer guidelines for choosing the appropriate type of container, depending on the use case.

ApplicationWindow Control

../_images/qtquickcontrols-applicationwindow-wireframe.png

ApplicationWindow creates the root window of an application, and makes it easy to add an optional header and footer to that window.

Frame Control

../_images/qtquickcontrols-frame.png

Frame is used to layout a logical group of controls together, within a visual frame.

GroupBox Control

../_images/qtquickcontrols-groupbox.png

GroupBox is used to layout a logical group of controls together, within a titled visual frame.

Page Control

../_images/qtquickcontrols-page-wireframe.png

Page provides page-specific header and footer items. It is perfectly possible to use ApplicationWindow for setting the header and the footer, but if you have a header and footer which varies per screen, then it is better to use Page .

Pane Control

../_images/qtquickcontrols-pane.png

Pane provides a background color that matches with the application style and theme. Pane does not provide a layout of its own, but requires you to position its contents, for instance by using a RowLayout or a ColumnLayout.

ScrollView Control

../_images/qtquickcontrols-scrollview-wireframe.png

ScrollView provides scrolling for user-defined content.

StackView Control

../_images/qtquickcontrols-stackview-wireframe.png

StackView organizes content pages into a stack using a last-in-first-out principle: the last item to be “pushed” onto the stack is the first one to be removed, and the top-most item is always the one that is visible.

SwipeView Control

../_images/qtquickcontrols-swipeview-wireframe.png

SwipeView organizes content pages into a swipable strip.

TabBar Control

../_images/qtquickcontrols-tabbar-wireframe.png

TabBar organizes content pages into tabs.

ToolBar Control

../_images/qtquickcontrols-toolbar.png

ToolBar is a container of application-wide and context-sensitive actions and controls.