C
Qt Quick Ultralite layouts Example
Demonstrates how to use Qt Quick Ultralite Layouts.
Overview
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
- MCIMX93-EVK
- MIMXRT1050
- MIMXRT1060
- MIMXRT1064
- MIMXRT1170
- STM32F769i
- STM32H750b
- STM32F469i
- RH850 D1M1A
- Infineon TRAVEO T2G
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:
- GridLayout::columns
- GridLayout::flow
- GridLayout::layoutDirection
- GridLayout::columnSpacing
- GridLayout::rowSpacing
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.
- ColumnLayout::spacing or RowLayout::spacing
- ColumnLayout::layoutDirection or RowLayout::layoutDirection
You can also see the updated layout by changing the layout properties.
Files:
Available under certain Qt licenses.
Find out more.
