Binding to a QML widget's rendered height - qt

Question

Let's say I have a text field and a button. I'd like to set the button's width and height to the text field's rendered height but it's not working.
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.10
Window {
id: window
visible: true
width: 640
height: 200
color: "#f0eded"
title: qsTr("Hello World")
RowLayout {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
TextField {
id: txtPassword
text: qsTr("Text Field")
font.pointSize: 22
}
Button {
id: btnSubmit
width: txtPassword.height
height: txtPassword.height
text: qsTr("»")
}
}
}
It looks like the button is ignoring the binding to the text field's height. My theory is that since this attribute isn't explicitly set, QML doesn't know which width/height to assign to the button.
What would be the proper way to take on the text field's actual rendered height?

Answer 1

If you use layout you should not use width or height, in case you want to obtain the same height you must use implicitWidth or implicitHeight, if you want the item to occupy the height of the row then you must use Layout.fillHeight: true. In the same way for the width.
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.10
Window {
id: window
visible: true
width: 640
height: 200
color: "#f0eded"
title: qsTr("Hello World")
RowLayout {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
TextField {
id: txtPassword
text: qsTr("Text Field")
font.pointSize: 22
}
Button {
id: btnSubmit
implicitHeight: txtPassword.implicitHeight // or Layout.fillHeight: true
implicitWidth: implicitHeight
text: qsTr("»")
}
}
}
Or instead of using RowLayout you could use a Row:
import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.10
Window {
id: window
visible: true
width: 640
height: 200
color: "#f0eded"
title: qsTr("Hello World")
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 5
TextField {
id: txtPassword
text: qsTr("Text Field")
font.pointSize: 22
}
Button {
id: btnSubmit
width: txtPassword.height
height: txtPassword.height
text: qsTr("»")
}
}
}