Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML - GridLayout - unable to center a page using it



  • I'm new to Qt and QML and while I'm trying to learn them I've encountered the following problem which I'm not sure why they appeared.

    I'm having a button, at the moment when I'm pressing it will display a new purple Rectangle over the screen. I am trying to position it at the center of the screen, or in other words to fill the whole screen, but for some reason, I can't do that, and It's always going to start from the beginning of Item 2 instead of the beginning of the screen. Also, it's going to be placed under Item 1 and Item 3 instead to overlay them.

    enter image description here

    MY CODE:

    import QtQuick 2.14
    import QtQuick.Window 2.14
    import QtQuick.Layouts 1.14
    import QtQuick.Controls 2.12
    
    Window {
        id: mainD
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        GridLayout {
            id : grid
            anchors.fill: parent
            rows    : 12
            columns : 20
            property double colMulti : grid.width / grid.columns
            property double rowMulti : grid.height / grid.rows
            function prefWidth(item){
                return colMulti * item.Layout.columnSpan
            }
            function prefHeight(item){
                return rowMulti * item.Layout.rowSpan
            }
            Rectangle {
                id: id1
                color : 'red'
                Layout.column: 0
                Layout.rowSpan: 10
                Layout.columnSpan: 2
                Layout.preferredWidth  : grid.prefWidth(this)
                Layout.preferredHeight : grid.prefHeight(this)
            }
            Rectangle {
                id: id2
                color : 'green'
                Layout.column: 2
                Layout.rowSpan: 10
                Layout.columnSpan: 18
                Layout.preferredWidth  : grid.prefWidth(this)
                Layout.preferredHeight : grid.prefHeight(this)
                Button{
                    width: 100
                    height: 100
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    onClicked: {
                        id2.state = "STATE_1"
                    }
                }
    
                StackView{
                    id: st
                    width: parent.width
                    height: parent.height + 100
                    
                    anchors.horizontalCenter: grid.parent.horizontalCenter
                    anchors.verticalCenter: grid.parent.verticalCenter
    
                    visible: false
                    Rectangle{
                        anchors.fill: parent
                        color: "purple"
                        opacity: 0.7
                        Button{
                            width: 100
                            height: 100
                            onClicked: {
                                id2.state = "STATE_2"
                            }
                        }
                    }
                }
    
                states: [
                    State{
                        name: "STATE_1"
                        PropertyChanges {
                            target: st;
                            visible: true
                        }
                    },
                    State{
                        name: "STATE_2"
                        PropertyChanges {
                            target: st;
                            visible: false
                        }
                    }
                ]
            }
            Rectangle {
                id: id3
                color : 'blue'
                Layout.column: 18
                Layout.rowSpan: 10
                Layout.columnSpan: 2
                Layout.preferredWidth  : grid.prefWidth(this)
                Layout.preferredHeight : grid.prefHeight(this)
            }
        }
    }
    

    Can anyone explain to me what I am doing wrong?


Log in to reply