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

Dealing with a Button and anchors



  • Hi all,

    Why do anchors in this QML code not work, please?!

    Window {
        id: window
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Button {
            id: myButton
            anchors.bottom: window.bottom
            anchors.right: window.right
    
            text:"<font color='green'>" + qsTr("OK") + "</font>"
            font.bold: true
            font.pixelSize: window.width / 50
            implicitWidth: window.width / 7; implicitHeight: window.height / 14
    
            background: Rectangle { color: "lightGrey"; radius: 20 }
    
        }
    }
    


  • Hi
    I think this is because the Window QML element does not de``rive from 'Item'.
    If you anchor like this -

            anchors.bottom: parent.bottom
            anchors.right: parent.right
    

    Then you will get want you want.



  • @GrahamLa

    In this code either:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.5
    
    Window {
        id: window
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
            id: widerArea
            color: "cornflowerblue"
            width: window.width / 1.2; height: window.height / 1.2
            anchors.centerIn: window
    
            Button {
                id: myButton
                anchors.bottom: window.bottom
                anchors.right: window.right
    
                text:"<font color='green'>" + qsTr("OK") + "</font>"
                font.bold: true
                font.pixelSize: window.width / 50
                implicitWidth: window.width / 7; implicitHeight: window.height / 14
    
                background: Rectangle { color: "lightGrey"; radius: 20 }
    
            }
        }
    }
    

    I get an error for the line:anchors.centerIn: window. Is it too because of the reason you mentioned, please?



  • @tomy said in Dealing with a Button and anchors:

    Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: widerArea
        color: "cornflowerblue"
        width: window.width / 1.2; height: window.height / 1.2
        anchors.centerIn: window
    
        Button {
            id: myButton
            anchors.bottom: window.bottom
            anchors.right: window.right
    
            text:"<font color='green'>" + qsTr("OK") + "</font>"
            font.bold: true
            font.pixelSize: window.width / 50
            implicitWidth: window.width / 7; implicitHeight: window.height / 14
    
            background: Rectangle { color: "lightGrey"; radius: 20 }
    
        }
    }
    

    }

    Yes, just use parent



  • @tomy said in Dealing with a Button and anchors:

    I get an error for the line:anchors.centerIn: window. Is it too because of the reason you mentioned, please?

    The problem is that Windows does not derive from Item, so it do not have an anchros property (cf. https://doc.qt.io/qt-5/qml-qtquick-window-window.html)

    To solve this, you have to use parent.
    So why does using parent? Because the children you define in a Window become children of an intermediate Item called contentItem. Which will have an anchors propertie.

    Hope this helps.



  • Thanks to all.
    In my second code above I wanted to put the button in the bottom-right corner of the window not widerArea!
    For that I think, the button ought to be declared outside the widerArea and use parent there.



  • @tomy said in Dealing with a Button and anchors:

    In my second code above I wanted to put the button in the bottom-right corner of the window not widerArea!

    Should be quite easy:

    Window {
        id: window
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Rectangle {
            id: widerArea
            color: "cornflowerblue"
            width: window.width / 1.2; height: window.height / 1.2
            anchors.centerIn: parent
        }
        Button {
            id: myButton
            anchors.bottom: parent.bottom
            anchors.right: parent.right
    
            text:"<font color='green'>" + qsTr("OK") + "</font>"
            font.bold: true
            font.pixelSize: window.width / 50
            implicitWidth: window.width / 7; implicitHeight: window.height / 14
    
            background: Rectangle { color: "lightGrey"; radius: 20 }
        }
    }
    
    


  • @KroMignon
    This way, the button will be put in the bottom-right corner of the rectangle not the window, because the parent of mybutton is widerArea not window.

    Still think the button ought to be declared out of widerArea for that purpose. And yes, it's quite easy. :)



  • @tomy said in Dealing with a Button and anchors:

    This way, the button will be put in the bottom-right corner of the rectangle not the window, because the parent of mybutton is widerArea not window.

    Nope, parent of myButton is window not widerArea, why do you think it is not the case?



  • @KroMignon
    Yeah, right. I didn't see that close curly bracket! :)

    anchors.centerIn: parent
        }     <= This
        Button {
            id: myButton
    

Log in to reply