QML - Lesson 014. GridLayout QML – Positioning of elements

GridLayout, Qt, QML, ячейка, cell, row, column

A short note, born out of the question of one of the regular readers of the site. When developing the application interface under QML for positioning objects in the GridLayout is necessary to use the functionality of embedded properties Layout. Such as:

• Layout.row - indicates the line where the object is located;
• Layout.column - indicates the column in which the object is located;
• Layout.rowSpan - indicates how many lines should be stretched object;
• Layout.columnSpan - indicates how many columns should be stretched object;
• Layout.minimumWidth - the minimum width of an object in a layer;
• Layout.minimumHeight - the minimum height of the object in a layer;
• Layout.preferredWidth - the preferred width of the object in a layer;
• Layout.preferredHeight - the preferred height of the object in a layer;
• Layout.maximumWidth - the maximum width of the object in a layer;
• Layout.maximumHeight - the maximum height of an object in a layer;
• Layout.fillWidth - filling in width;
• Layout.fillHeight - filling height;
• Layout.alignment - alignment layer;

GridLayout properties

Also, for the sake of completeness, I specify the properties GridLayout and what they are responsible:

• columnSpacing : real - the spacing between the columns (the gap between the objects);
• columns : int - the number of columns;
• flow : enumeration - the direction of arrangement of objects in a GridLayout
• GridLayout.LeftToRight (default) - left to right
• GridLayout.TopToBottom - top down
• layoutDirection : enumeration - the direction of transfer of the objects at a given flow
• Qt.LeftToRight (default) - left to right
• Qt.RightToLeft - from right to left
• rowSpacing : real - spaces between lines (gap between the objects);
• rows : int - number of lines;

If set:

• flow: GridLayout.TopToBottom
• layoutDirection: Qt.RightToLeft

So as a result we find that the first element of the string is at the top, and the last line item is at the bottom. In the case of two lines, the first line elements are located on the right.

Word with GridLayout

To demonstrate the elements of positioning in the bed I offer the following code. In which several rectangles will stretch for several GridLayout cell.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
 
ApplicationWindow {
    visible: true
    width: 480
    height: 480
    title: qsTr("Hello World")
 
   GridLayout {
       id: grid
       anchors.fill: parent
 
       rows: 3
       columns: 3
 
       Rectangle {
            color: "red"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 1
            Layout.row: 1
            Layout.column: 2
       }
 
       Rectangle {
            color: "blue"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 2
            Layout.row: 1
            Layout.column: 1
       }
 
       Rectangle {
            color: "green"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 2
            Layout.row: 2
            Layout.column: 3
       }
 
       Rectangle {
            color: "white"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 1
            Layout.rowSpan: 1
            Layout.row: 2
            Layout.column: 2
       }
 
       Rectangle {
            color: "yellow"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.columnSpan: 2
            Layout.rowSpan: 1
            Layout.row: 3
            Layout.column: 1
       }
   }
}

Conclusion

The result of this code is shown in the figure. Also, the above arrangement of objects logic applies to other objects Layout .