How to make the last element in a QML container fill the remaining space?

Question

I want to have a dynamically resizable window with the layout of the columns so that any remaining space is filled with the last element in the column. I could do this by dynamically calculating the height of the last element in javascript. I could also move the last element from the column and snap the top to the bottom of the column and the bottom of the container, however I would also need to calculate the new size of the column from its contents.

import QtQuick 2.0 import QtQuick.Controls 1.1 Rectangle { id: rect anchors.fill: parent Column { id: myColumn anchors.fill: parent Rectangle { id: container signal clicked width: label.width + 20; height: label.height + 6 anchors { right: parent.right } border.width: 1 MouseArea { id: mouseArea anchors.fill: parent onClicked: { if (myColumn.state == 'hidden') { myColumn.state = '' } else { myColumn.state = 'hidden'; } } } Text { id: label text: { if (myColumn.state == '') {"Hide"} else {"Show"} } anchors.centerIn: parent } } Text { id: textualBox text: "A Big Box" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter anchors { left: parent.left; right: parent.right } height: 200 } TableView { id: table width: parent.width height: { myColumn.height - container.height - textualBox.height } model: myData TableViewColumn { role: "name"; title: "name"; width: 60 } TableViewColumn { role: "stuff"; title: "stuff"; width: 60 } } states: State { name: 'hidden' PropertyChanges { target: textualBox height: 20 text: "a little box" } } } ListModel { id: myData ListElement{ name: "content" ; stuff: "4.5" } ListElement{ name: "content" ; stuff: "4.5" } ListElement{ name: "content" ; stuff: "4.5" } } } 

Is there a more elegant way to do this?

Answer 1

You can use ColumnLayout and Layout.fillHeight attached property instead of Column

 import QtQuick 2.3 import QtQuick.Controls 1.2 import QtQuick.Layouts 1.1 ApplicationWindow { visible: true width: 640 height: 480 ColumnLayout{ anchors.fill: parent Rectangle { color: "red" Layout.fillWidth: true height: 30 } Rectangle { color: "blue" Layout.fillWidth: true Layout.fillHeight: true } } } 

Answer 2

You do not need to count all the children, you just need to use parent.height - y for the column or parent.width - x for Row,

This also works when resizing ApplicationWindow.

 import QtQuick 2.7 import QtQuick.Controls 2.0 ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("Hello World") Column{ anchors.fill: parent Rectangle{ color: "#ff0000" anchors.right: parent.right anchors.left: parent.left height: 100 } Rectangle{ color: "#ffff00" anchors.right: parent.right anchors.left: parent.left height: 100 } Rectangle{ color: "#ff00ff" anchors.right: parent.right anchors.left: parent.left height: parent.height - y Text { text: qsTr("top line ----------------- ") anchors.top: parent.top } Text { text: qsTr("bottom line ----------------- ") anchors.bottom: parent.bottom } } } }