Qt Quick Ultralite layouts Example

Demonstrates how to use Qt Quick Ultralite Layouts.


This example shows how to use Qt Quick Ultralite Layouts.

The example has three tabs demonstrating GridLayout, ColumnLayout, and RowLayout. Each page has controls on the right side, which manipulate the layout properties. The positions of the colored boxes (as child items of the layout) change according to the values of the layout properties.

Target platforms

Project structure

Main application

The main application window has three tabs at the top. When selecting a tab, it loads the page containing the designated layout demo.

GridLayout page

The GridLayout.qml has several controls to update the following layout properties:

By changing the property values, the layout updates the positions of the colored boxes on the right side.

ColumnLayout page and RowLayout page

The ColumnLayout.qml and the RowLayout.qml have the same structure as GridLayout.qml but reduced controls since these layouts have fewer features than GridLayout.

You can also see the updated layout by changing the layout properties.


Available under certain Qt licenses.
Find out more.