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 .

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

a
Feb. 25, 2020, 4:40 a.m.
ayb

C++ - Test 005. Structures and Classes

  • Result:83points,
  • Rating points4
DZ
Feb. 24, 2020, 1:47 p.m.
Dmitrij Zlobin

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:40points,
  • Rating points-8
p
Feb. 17, 2020, 1:41 p.m.
pstMem

C++ - Тест 003. Условия и циклы

  • Result:85points,
  • Rating points6
Last comments
Feb. 24, 2020, 2:54 a.m.
Evgenij Legotskoj

Добрый день. Там будет url, на который указывает ссылка тега a в пагинаторе, если правильно помню )) Написал этот код и забыл.
B
Feb. 23, 2020, 11:37 p.m.
BahaMeirman

Евгений Здравствуйте! Не могу понять вот эту часть кода: url: jQuery(this).attr('action') наверное здесь должен быть путь к url, тогда 'action' на какой url указывает?
Feb. 17, 2020, 2:22 a.m.
Evgenij Legotskoj

Добрый день. Это кастомный тег, помещается в файл, который находится в каталоге templatetags myapp/ templatetags/ myapp.py
B
Feb. 16, 2020, 12:36 p.m.
BahaMeirman

Добрый вечер! Монжно по подробней о теге get_companion? ссылка не работает.
Now discuss on the forum
a
Feb. 25, 2020, 7:06 a.m.
ayb

Да
Feb. 24, 2020, 11:04 a.m.
Evgenij Legotskoj

Добрый день. Вот пример с дружественного ресурса с движением камеры
Feb. 24, 2020, 5:29 a.m.
Evgenij Legotskoj

Qt не предоставляет функционала по запросу root прав во время выполнения программы. Поэтому нужно использовать платформозависимый функционал, для Linux это будет выглядеть так: #include…
Feb. 24, 2020, 2:47 a.m.
Evgenij Legotskoj

Добрый день. Что означает клиентская область? Это изображение? Вам нужно распознавать символы текста или всё-таки пользователь будет вводить текст с клавиатуры, просто в любом месте "абстр…
VZ
Feb. 21, 2020, 4:19 a.m.
Vladimir Zhitkovsky

void sendImage(int sessid, int type, int dest, int format, QString imgBase64Data){ QNetworkRequest request; request.setUrl(QUrl(ipAddress + "ctlapi/cmd=preparereportimg&sessid=…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB