Блог

У меня есть код QML, подобный этому:

MyItem.qml:

 import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Item {
    id: root
    width: parent.width
    height: grid.height

    Rectangle {
        anchors.fill: root
        color: "blue"
        z: -1
    }

    Flow {
        id: grid
        width: parent.width
        spacing: 5
        Button {
            text: qsTr("Button 1")
        }
        Button {
            text: qsTr("Button 2")
        }
        Button {
            text: qsTr("Button 3")
        }
    }
}
  

main.qml:

 import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

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

    ColumnLayout {

        anchors.fill: parent

        Button {
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "hello"
        }

        MyItem {
            Layout.fillWidth: true
        }
    }
}
  

Если поток достаточно широк, чтобы все три кнопки находились на одной строке (как в RowLayout), в нижней части потока (примерно кнопка.высота * 2). Похоже, что высота потока всегда вычисляется как сумма высот всех его элементов.

Какова логика такого поведения? Как сделать так, чтобы поток соответствовал его высоте содержимого?

EDIT1: это не поток, но элемент ‘root’ имеет неправильную высоту.

ПРАВКА2: загрузите пример приложения

Проблема с вашим кодом заключается в том, что корневой элемент выражений:

 anchors.fill: parent 
height: grid.height 
  

конкурируют, в первом выражении вы указываете, что размеры корня будут принимать размер окна, и это подразумевает высоту, но в следующем выражении вы указываете, что высота будет больше не из окна, а из сетки, так что это порождает неопределенное поведение. Единственное решение — установить, что ширина корневого элемента равна ширине окна.

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

    Item {
        id: root
        height: grid.height
        width: parent.width
        Rectangle {
            anchors.fill: root
            color: "blue"
        }
        Flow {
            id: grid
            width: parent.width
            spacing: 5
            Button {
                text: qsTr("Button 1")
            }
            Button {
                text: qsTr("Button 2")
            }
            Button {
                text: qsTr("Button 3")
            }
        }
    }
}
  

Обновить:

Кажется, вы не знаете, как они работают (читать https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#details ), по умолчанию берется высота implicitHeight.

Кроме того, если вы используете layout, вам не следует устанавливать привязки в элементах, на которые непосредственно влияют макеты, в вашем случае на командную таблицу влияет макет, поэтому вы не должны использовать width: parent.width , является ненужным.

CommandsTab.qml

 import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Item {
    id: root
    implicitHeight: grid.height
    Rectangle {
        anchors.fill: root
        color: "blue"
        z: -1
    }
    Flow {
        id: grid
        width: parent.width
        spacing: 5
        Button {
            text: qsTr("Button 1")
        }
        Button {
            text: qsTr("Button 2")
        }
        Button {
            text: qsTr("Button 3")
        }
    }
}
  

main.qml

 import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

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

    ColumnLayout {
        anchors.fill: parent
        Button {
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "hello"
        }
        CommandsTab {
            Layout.fillWidth: true
        }
    }
}