QtQuick Grid Layout 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts


ApplicationWindow {

    visible: true
    width: 400
    height:400
    title: "Grid Layout Example"
    
    function setLabelText (name, row, column) {
        label.text = "Button: " + name + "\n" 
            + "row: " +  row + "\n"
            + "column: " + column
    }
    
    GridLayout {
        
        anchors.fill: parent
        columns: 2
            
        Button {

            // Layout.row: 0
            // Layout.column: 1
        
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "Button 1"
            
            onClicked: setLabelText(
                text, Layout.row, Layout.column)
        }
        
        Button {
            
            // Layout.row: 0
            // Layout.column: 0
        
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "Button 2"
            
            onClicked: setLabelText(
                text, Layout.row, Layout.column)
        }
        
        Button {
            
            // Layout.row: 1
            // Layout.column: 1
        
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "Button 3"
            
            onClicked: setLabelText(
                text, Layout.row, Layout.column)
        }
        
        Button {
            
            // Layout.row: 1
            // Layout.column: 0
        
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "Button 4"
            
            onClicked: setLabelText(
                text, Layout.row, Layout.column)
        }
        
        Label {
        
            id: label
            
            // Layout.row: 2
            // Layout.column: 0
            Layout.columnSpan: 2
            
            Layout.minimumHeight: 200
            Layout.maximumHeight: 200
            Layout.fillWidth: true
            Layout.fillHeight: true
            
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            
            text: "text"
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import sys

from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine


if __name__ == '__main__':

    app = QGuiApplication(sys.argv)
    
    engine = QQmlApplicationEngine()
    engine.quit.connect(app.quit)
    engine.load('03_gridlayout.qml')
    
    result = app.exec()
    del engine
    
    sys.exit(result)