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