QML ändern Höhe des Artikels in Bezug auf Höhenänderung des Elements darunter

Question

Ich habe eine Listview und ein Textfeld darunter. Ich möchte, dass die Höhe der Listenansicht in Bezug auf die Größe der Textfläche zunimmt oder abnimmt. Ich habe versucht, den unteren Teil von Listview an den oberen Bereich des Textarea zu verankern, hat nicht funktioniert. Dann habe ich versucht, den oberen Teil des Textfelds am Ende der Listenansicht zu verankern, auch nicht. Versuchte beide zusammen, beides nicht. Jedesmal, es gibt die Laufzeitfehler/Warnung von Bindungsschleife erfasst für Eigenschaft „Höhe“ ich dies auch Spielraum in TextArea- der versucht, aber ich habe das gleiche Laufzeitfehler/Warnung und keine Ergebnisse:

onTextChanged: { 
      listView.anchors.bottomMargin = height; 
     } 

Wie kann Ich erreiche das?

Hier ist der Code:

ListView{ 
    id: listView 
//  anchors.fill: parent 
    anchors.top: parent.top 
    anchors.left: parent.left 
    anchors.right: parent.right 
    anchors.bottom: parent.bottom 
    anchors.bottomMargin: 0 
    anchors.margins: 10 
    delegate: ChatMessageItem{} 
    model: listModel 
    spacing: 15 
} 

Rectangle{ 
    id: rectInput 
    height: childrenRect.height + 6 
    width: parent.width 
//  anchors.top: listView.bottom 
    anchors.bottom: parent.bottom 
    color: "#BDC3C7" 
    TextArea{ 
     id: tMsg 
     placeholderText: qsTr("Enter message") 
     width: parent.width - 30 
     anchors.bottom: parent.bottom 
     anchors.bottomMargin: 2 
     anchors.left: parent.left 
     anchors.leftMargin: 1 
     focus: true 
     wrapMode: TextArea.Wrap 
     background: Rectangle { 
      border.color: "#BDC3C7" 
      border.width: 2 
      color: "#ECF0F1" 
     } 
     onTextChanged: { 
      listView.anchors.bottomMargin = height; 
     } 
    } 
} 

Answer 1

import QtQuick 2.3 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.4 

Window { 
    visible: true 
    width : 500 
    height: 300 

    ListModel { 
     id: contactModel 
     ListElement { 
      name: "Bill Smith" 
      number: "555 3264" 
     } 
     ListElement { 
      name: "John Brown" 
      number: "555 8426" 
     } 
     ListElement { 
      name: "Sam Wise" 
      number: "555 0473" 
     } 
    } 

    Component { 
     id: contactDelegate 
     Item { 
      width: 180; height: 80 
      Column { 
       Text { text: '<b>Name:</b> ' + name } 
       Text { text: '<b>Number:</b> ' + number } 
      } 
     } 
    } 


    ListView { 
     id: listView 
     anchors.top: parent.top; 
     anchors.left: parent.left; 
     anchors.right: parent.right; 
     anchors.bottom: rectInput.top; 

     model: contactModel 
     delegate: contactDelegate 
    } 

    Rectangle{ 
     id: rectInput 
     height: tMsg.height+4; 
     color: "#BDC3C7" 
     anchors.bottom: parent.bottom 
     width: parent.width 

     TextArea{ 
      id: tMsg 

      width: parent.width - 2 
      anchors.bottom: parent.bottom 
      anchors.bottomMargin: 2 
      anchors.left: parent.left 
      anchors.leftMargin: 1 
      focus: true 
      wrapMode: TextArea.Wrap 
     } 
    } 
} 

Eine Probe qml Datei funktioniert gut. Im Zweifelsfall vereinfachen Sie das Problem und fügen es Stück für Stück zurück.

In Ihrem Code:

height: childrenRect.height + 6 

Ich sehe nicht childrenRect überall definiert. Vielleicht würde das Ersetzen durch tMsg.height und das Verankern der Unterseite der Liste an der Oberseite des Rechtecks ​​funktionieren? Es funktioniert in meiner Beispieldatei (ich kann Ihren Code Wort für Wort nicht verwenden, weil es nicht allein abgeschlossen ist). Ersetzen childrenRect von tMsg entfernt die Bindungsschleife Fehler für mich.

By the way: habe ich den Boden der Listenansicht auf die Oberseite des rect, nicht zu dem Textbereich der Oberseite, die im Innern des rect ist:

anchors.bottom: rectInput.top 

Eine Alternative wäre in der Listenansicht zu tun :

anchors.bottom: parent.bottom 
anchors.bottomMargin: tMsg.height 

Neben einer Warnung beim Start, wenn die Textansicht noch nicht erstellt wird, funktioniert es auch in Ordnung.