Привязка к отображаемой высоте виджета QML

Question

Допустим, у меня есть текстовое поле и кнопка. Я хотел бы установить ширину и высоту кнопки в соответствии с высотой отображаемого текстового поля, но она не работает.

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("»")
        }
    }
}

Это выглядит как Кнопка игнорирует привязку к высоте текстового поля. Моя теория состоит в том, что, поскольку этот атрибут не установлен явно, QML не знает, какую ширину / высоту назначить кнопке.

Каким будет правильный способ принять фактическую визуализированную высоту текстового поля?

Answer 1

Если вы используете макет, вы не должны использовать ширину или высоту, если вы хотите получить ту же высоту, вы должны использовать implicitWidth или implicitHeight, если вы хотите, чтобы элемент занимал высоту строки, то вы должны используйте Layout.fillHeight: true. Таким же образом для ширины.

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("»")
        }
    }
}

Или вместо использования RowLayout вы можете использовать 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("»")
        }
    }
}