Positioning Elements

There are a number of QML elements used to position items. These are called positioners, of which the Qt Quick module provides the following: Row, Column, Grid and Flow. They can be seen showing the same contents in the illustration below.

TIP

Before we go into details, let me introduce some helper elements: the red, blue, green, lighter and darker squares. Each of these components contains a 48x48 pixel colorized rectangle. As a reference, here is the source code for the RedSquare:

  1. // RedSquare.qml
  3. import QtQuick
  5. Rectangle {
  6.     width: 48
  7.     height: 48
  8.     color: "#ea7025"
  9.     border.color: Qt.lighter(color)
  10. }

Please note the use of Qt.lighter(color) to produce a lighter border color based on the fill color. We will use these helpers in the next examples to make the source code more compact and readable. Please remember, each rectangle is initially 48x48 pixels.

The Column element arranges child items into a column by stacking them on top of each other. The spacing property can be used to distance each of the child elements from each other.

Positioning Elements - 图1

  1. // column.qml
  3. import QtQuick
  5. DarkSquare {
  6.     id: root
  7.     width: 120
  8.     height: 240
  10.     Column {
  11.         id: row
  12.         anchors.centerIn: parent
  13.         spacing: 8
  14.         RedSquare { }
  15.         GreenSquare { width: 96 }
  16.         BlueSquare { }
  17.     }
  18. }

The Row element places its child items next to each other, either from the left to the right, or from the right to the left, depending on the layoutDirection property. Again, spacing is used to separate child items.

Positioning Elements - 图2

  1. // row.qml
  3. import QtQuick
  5. BrightSquare {
  6.     id: root
  7.     width: 400; height: 120
  9.     Row {
  10.         id: row
  11.         anchors.centerIn: parent
  12.         spacing: 20
  13.         BlueSquare { }
  14.         GreenSquare { }
  15.         RedSquare { }
  16.     }
  17. }

The Grid element arranges its children in a grid. By setting the rows and columns properties, the number of rows or columns can be constrained. By not setting either of them, the other is calculated from the number of child items. For instance, setting rows to 3 and adding 6 child items will result in 2 columns. The properties flow and layoutDirection are used to control the order in which the items are added to the grid, while spacing controls the amount of space separating the child items.

Positioning Elements - 图3

  1. // grid.qml
  3. import QtQuick
  5. BrightSquare {
  6.     id: root
  7.     width: 160
  8.     height: 160
  10.     Grid {
  11.         id: grid
  12.         rows: 2
  13.         columns: 2
  14.         anchors.centerIn: parent
  15.         spacing: 8
  16.         RedSquare { }
  17.         RedSquare { }
  18.         RedSquare { }
  19.         RedSquare { }
  20.     }
  21. }

The final positioner is Flow. It adds its child items in a flow. The direction of the flow is controlled using flow and layoutDirection. It can run sideways or from the top to the bottom. It can also run from left to right or in the opposite direction. As the items are added in the flow, they are wrapped to form new rows or columns as needed. In order for a flow to work, it must have a width or a height. This can be set either directly, or though anchor layouts.

Positioning Elements - 图4

  1. // flow.qml
  3. import QtQuick
  5. BrightSquare {
  6.     id: root
  7.     width: 160
  8.     height: 160
  10.     Flow {
  11.         anchors.fill: parent
  12.         anchors.margins: 20
  13.         spacing: 20
  14.         RedSquare { }
  15.         BlueSquare { }
  16.         GreenSquare { }
  17.     }
  18. }

An element often used with positioners is the Repeater. It works like a for-loop and iterates over a model. In the simplest case a model is just a value providing the number of loops.

Positioning Elements - 图5

  1. // repeater.qml
  3. import QtQuick
  5. DarkSquare {
  6.     id: root
  7.     width: 252
  8.     height: 252
  9.     property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]
  12.     Grid{
  13.         anchors.fill: parent
  14.         anchors.margins: 8
  15.         spacing: 4
  16.         Repeater {
  17.             model: 16
  18.             Rectangle {
  19.                 width: 56; height: 56
  20.                 property int colorIndex: Math.floor(Math.random()*3)
  21.                 color: root.colorArray[colorIndex]
  22.                 border.color: Qt.lighter(color)
  23.                 Text {
  24.                     anchors.centerIn: parent
  25.                     color: "#f0f0f0"
  26.                     text: "Cell " + index
  27.                 }
  28.             }
  29.         }
  30.     }
  31. }

In this repeater example, we use some new magic. We define our own colorArray property, which is an array of colors. The repeater creates a series of rectangles (16, as defined by the model). For each loop, it creates the rectangle as defined by the child of the repeater. In the rectangle we chose the color by using JS math functions: Math.floor(Math.random()\*3). This gives us a random number in the range from 0..2, which we use to select the color from our color array. As noted earlier, JavaScript is a core part of Qt Quick, and as such, the standard libraries are available to us.

A repeater injects the index property into the repeater. It contains the current loop-index. (0,1,..15). We can use this to make our own decisions based on the index, or in our case to visualize the current index with the Text element.

TIP

More advanced handling of larger models and kinetic views with dynamic delegates is covered in its own model-view chapter. Repeaters are best used when having a small amount of static data to be presented.