QML kapsayıcıda son öğe nasıl yapılır?

Question

Sütun düzeninde kalan son öğe tarafından doldurulan her ne olursa olsun, bir sütun düzeni ile dinamik olarak yeniden boyutlandırılabilir pencereye sahip olmak istiyorum. Javascript'te son öğenin yüksekliğini dinamik olarak hesaplayarak bunu yapabilirim. Ayrıca, son maddeyi sütunun dışına taşıyabilir ve üst kısmı sütunun tabanına ve kabın tabanına bağlayabilirim, ancak daha sonra sütunun yeni boyutunu içeriğinden de hesaplamak zorunda kaldım.

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

Bunu yapmanın daha zarif bir yolu var mı?

Answer 1

Sen tüm alt öğelerini gerek saymak yerine 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

ait ColumnLayout ve Layout.fillHeight ekli özelliğini kullanabilir, sadece parent.height kullanmak gerekir - y Sütun veya parent.width için - için x ApplicationWindow yeniden boyutlandırıldığında Row

Bu aynı zamanda, işler

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

}