Advanced Qt Programming (45): QML Element Layout Locator

In QML programming, you can use x and y attributes to manually lay out elements, but these attributes are closely related to the position of the upper-left corner of the element's parent object, and it is not easy to determine the relative position between each child element. To this end, QML provides locators and anchors to simplify the layout of elements.

Locators are a class of elements dedicated to positioning in QML, mainly Row, Column, Grid and Flow, which are all included in the QtQuick module.

1. Row, column, grid positioning

Row, column, and grid positioning use Row, Column, and Grid elements, respectively, and the effect is shown in the figure.

The specific implementation steps are as follows.

• (1) Create a new QML application with the project name "Positioner".

• (2) Define three rectangular components of red, green, and blue (see the previous article in this series: Qt Programming Advanced (44): QML Custom Elements (Components)), the codes are as follows:

/*红色矩形，源文件RedRectangle.qml */
import QtQuick 2.0
Rectangle {
  width: 64 //宽度
  height: 32 //高度
  color: "red" //颜色
  border.color: Qt.lighter(color)//边框色设置比填充色浅（默认是50%)
}
/* 蓝色矩形，源文件 BlueRectangle.qml */
import QtQuick 2.0
  Rectangle {
  width: 80
  height: 50
  color: "blue"
  border.color: Qt.lighter(color)
}
/* 绿色矩形，源文件 GreenRectangle.qml */
import QtQuick 2.0
  Rectangle {
  width: 48
  height: 62
  color: "green"
  border.color: Qt.lighter(color)
}           

• (3) Open the "main.qml file" and write the code as follows:

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 420
  height: 280
  visible: true
  title: qsTr("Positioner")
  Rectangle {
  width: 420
  height: 280
  anchors.fill: parent
  Row { //(a)
    x: 25
    y: 25
    spacing: 10 //元素间距为10像素
    layoutDirection:Qt.RightToLeft //元素从右向左排列
    //以下添加被Row定位的元素成员
    RedRectangle { }
    GreenRectangle { }
    BlueRectangle { }
  }
  Column { // (b)
    x: 25
    y: 120
    spacing: 2
    //以下添加被Column定位的元素成员 RedRectangle { }
    GreenRectangle { }
    BlueRectangle { }
  }
  Grid { // (c)
    x:140
    y:120
    columns: 3 //每行3个元素
    spacing: 5
    //以下添加被Grid定位的元素成员
    BlueRectangle { }
    BlueRectangle { }
    BlueRectangle { }
    BlueRectangle { }
    BlueRectangle { }
    }
  }
}           

thereinto

• (a) Row{...} : Row places all the element members it positions in a row with equal spacing between all elements (set by the spacing attribute) and the top is aligned. The layoutDirection property sets the order in which elements are arranged, and the values can be Qt.LeftToRight (default, left-to-right), Qt.RightToLeft (right-to-left).
• (b) Column {...}: Column arranges element members in the same column from top to bottom in the order of addition, again specified by the spacing attribute, and all elements are left-aligned.
• (c) Grid{...}: Grid arranges its element members into a grid, arranged from left to right by default, with 4 elements per row. You can customize the values of rows and columns by setting the rows and columns properties, and if one is not explicitly set, the other is calculated from the total number of element members. For example, if the columns in this example are set to 3, if you put a total of 5 blue rectangles, the number of rows will be automatically calculated as 2.

2. Flow Localization

Flow positioning uses the Flow element, which works as shown in the figure.

The specific implementation steps are as follows.

• (1) Modify the item "Positioner" in the previous example if you still use it.

• (2) Open the "main.qml" file and modify the code as follows:

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 150
  height: 200
  visible: true
  title: qsTr("Positioner")
  Rectangle {
    width: 150 //(a)
    height: 200 //(a)
    anchors.fill: parent
    Flow { //(b)
      anchors.fill: parent
      anchors.margins: 15 //元素与窗口左上角边距为15像素
      spacing: 5
      //以下添加被Flow定位的元素成员
      RedRectangle { }
      BlueRectangle { }
      GreenRectangle { }
    }
  }
}           

thereinto

• (a) width: 150; height: 200: In order for Flow to work correctly and demonstrate its practical effect, you need to specify the width and height of the element's display area.
• (b) Flow {...} : As the name suggests, Flow displays its element members as a flow, which can be laid out horizontally from left to right, vertically from top to bottom, or vice versa. However, unlike locators such as Row and Column, elements added to Flow will dynamically adjust their layout according to changes in the size of the display area (form). Taking this program as an example, at the initial runtime, because the form is narrow and cannot arrange elements horizontally, the three rectangles are arranged vertically, and in the process of widening the form with the mouse, the rectangle gradually changes from vertical to horizontal.

3. Repeater

Repeaters are used to create a large number of similar element members and are often used in combination with other locators.

Repeater combined with Grid to arrange a set of rectangular elements, and the effect is shown in the figure.

The specific implementation steps are as follows.

• (1) Create a new QML application with the project name "Repeater".

• (2) Open the "main.qml" file and write the code as follows:

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 300
  height: 250
  visible: true
  title: qsTr("Repeater")
  Rectangle {
    width: 360
    height: 360
    anchors.fill: parent
    Grid {//Grid定位器
      x : 25; y: 25
      spacing: 4
      //用重复器为Grid添加元素成员
      Repeater { // (a)
        model: 16 //要创建元素成员的个数
        Rectangle {//成员皆为矩形元素
          width: 48; height: 48
          color:"aqua"
          Text {//显示矩形编号
            anchors.centerIn: parent
            color: "black"
            font.pointSize: 20
            text: index// (b)
          }
        }
      }
    }
  }
}           

thereinto

• (a) Repeater {...}: The repeater, as the data provider of the Grid, can create any QML basic visual element. Since Repeater generates child elements in a loop according to the number of times defined by its model attribute, the above code repeatedly generates 16 Rectangles.
• (b) text: index: Repeater injects an index attribute for each child element as the current loop index (0~15 in this example). Since this attribute can be used directly in the child element definition, it is used here to assign a value to the text property of Text.

————————————————

If you find it useful, please pay attention to like, thank you for your support!

For friends who need the complete code of the relevant examples of this series of articles, you can follow and leave a message in the comment area!