Evgenii Legotckoi
Evgenii LegotckoiNov. 6, 2015, 8:17 a.m.

QML - Lesson 014. GridLayout QML – Positioning of elements

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.

Do you like it? Share on social networks!

Comments

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

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

  • Result:50points,
  • Rating points-4
m

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

  • Result:80points,
  • Rating points4
m

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

  • Result:20points,
  • Rating points-10
Last comments
i
innorwallNov. 13, 2024, 11:03 p.m.
How to make game using Qt - Lesson 3. Interaction with other objects what is priligy tablets What happens during the LASIK surgery process
i
innorwallNov. 13, 2024, 8:09 p.m.
Using variables declared in CMakeLists.txt inside C ++ files where can i buy priligy online safely Tom Platz How about things like we read about in the magazines like roid rage and does that really
i
innorwallNov. 11, 2024, 10:12 p.m.
Django - Tutorial 055. How to write auto populate field functionality Freckles because of several brand names retin a, atralin buy generic priligy
i
innorwallNov. 11, 2024, 6:23 p.m.
QML - Tutorial 035. Using enumerations in QML without C ++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
i
innorwallNov. 11, 2024, 3:50 p.m.
Qt/C++ - Lesson 052. Customization Qt Audio player in the style of AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
Now discuss on the forum
i
innorwallNov. 14, 2024, 12:39 a.m.
добавить qlineseries в функции Listen intently to what Jerry says about Conditional Acceptance because that s the bargaining chip in the song and dance you will have to engage in to protect yourself and your family from AMI S…
i
innorwallNov. 11, 2024, 10:55 a.m.
Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
9
9AnonimOct. 25, 2024, 9:10 a.m.
Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

Follow us in social networks