Jak wypełnić ostatni pozostały element w pojemniku QML?

Question

Chcę mieć dynamicznie skalowalne okno z układem kolumn, tak aby pozostała przestrzeń była wypełniona przez ostatni element w kolumnie. Mogłem to zrobić przez dynamiczne obliczanie wysokości ostatniego elementu w javascript. Mógłbym też przenieść ostatni element z kolumny i związać górną część z dolną częścią kolumny i spodem kontenera, jednak musiałbym również obliczyć nowy rozmiar kolumny z jej zawartości.

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

Czy istnieje bardziej elegancki sposób robienia tego?

Answer 1

Można użyć ColumnLayout i Layout.fillHeight załączony właściwość zamiast 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

liczyć nie trzeba wszystkie elementy podrzędne, wystarczy użyć parent.height - Y do kolumny lub parent.width - X dla wiersz,

działa to także wtedy, gdy ApplicationWindow jest zmieniany,

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

}