Come fare l'ultimo elemento nel contenitore QML riempire lo spazio rimanente?

Question

Desidero avere una finestra ridimensionabile dinamicamente con un layout di colonna in modo tale che qualsiasi spazio rimanente venga riempito dall'ultimo elemento nella colonna. Potrei farlo calcolando dinamicamente l'altezza dell'ultimo oggetto in javascript. Potrei anche spostare l'ultimo elemento fuori dalla colonna e legare la parte superiore alla parte inferiore della colonna e il fondo del contenitore, tuttavia dovrei anche calcolare la nuova dimensione della colonna dal suo contenuto.

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" } 
    } 
} 

C'è un modo più elegante per farlo?

Answer 1

È possibile utilizzare ColumnLayout e Layout.fillHeight proprietà associata invece di 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

Non hai bisogno contano tutti gli elementi figlio, non vi resta che utilizzare parent.height - y per la colonna, o parent.width - x per fila,

Questo funziona anche quando l'ApplicationWindow viene ridimensionata,

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 
       } 
      } 
     } 

}