Item Positioners in QML

Positioner items are container items that manage the positions of items in a declarative user interface. The items are arranged in a regular layout, like column, row or grid, etc.

In this article, we will discuss 4 different types of positioners.

  1. Row
  2. Column
  3. Grid
  4. Flow

Row item positioner positions the child items in a row.

Column item positioner positions the child items in a column.

Grid item positioner positions the child items in a grid.

You can use spacing property to specify spacing between individual items. You can use padding(or topPadding, rightPadding, bottomPadding and leftPadding) to specify the space between the row and the adjacent elements.

If the width or height of any item is 0 or the item is not visible, then that item is not populated at all.

In the above code, rectangle r3 is invisible. It won’t be populated at all.

A row positioner automatically positions its children horizontally. So a child item within a Row should not set any of its properties that affects it’s x position. Basically, you should not set any of the following properties.

  1. x-position absolute value
  2. any horizontal anchors (left, right, horizontalCenter, fill, centerIn)

Similar rules apply on column positioner. You should not set any of the following properties.

  1. y-position absolute value
  2. any vertical anchors(top, bottom, verticalCenter, fill, centerIn)

For grid, you should not set any of the following properties,

  1. x- and y- position absolute value
  2. any anchor

For grid, either columns or rows or both can be specified. If both or one is missing, it will be calculated. If no. of items is more than the size, some items will not be populated.

Flow

The Flow item automatically positions the child items side by side, wrapping as necessary. As the available space and the layout changes, the positioning of child items will change.

The items can access the positional properties using Positioner attached properties.

  1. index returns the index of the item inside the positioner container
  2. isFirstItem returns true if its the first item, else false
  3. isLastItem returns true if its the last item, else false

Thanks for reading !!

C++11/14, Qt, Juce

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store