Dealing with a Button and anchors

[tomy]

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 }

    }
}

[GrahamLa]

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.

[tomy]

@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?

[GrahamLa]

@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

[KroMignon]

@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.

[tomy]

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.

[KroMignon]

@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 }
    }
}

[tomy]

@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. :)

[KroMignon]

@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?

[tomy]

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

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