QML 아래 항목의 높이 변화에 대한 항목의 높이 변경

Question

나는 그 아래에 listview 및 textarea가 있습니다. 나는 textviewa의 크기에 따라 listview의 높이가 증가하거나 감소하기를 원한다. textarea의 상단에 listview의 맨 아래에 고정 시키려고 시도했지만 작동하지 않았습니다. 그런 다음 listview의 맨 아래에 텍스트 영역의 맨 위에 고정 시키려고 시도했으나 작동하지 않았습니다. 둘 다 시도했는데 그 중 하나도하지 않았습니다. 매번 내가 또한 텍스트 영역의 범위에이 시도 재산 "높이"에 대한 검색 바인딩 루프의 런타임 오류/경고를 제공, 아직 나는 같은 런타임 오류/경고없이 결과가 있습니다

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

어떻게을 나는 이것을 성취합니까?

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

샘플 QML 파일이 잘 작동 :

여기에 코드입니다. 의심스러운 경우 문제를 간단히 해결하고 조금씩 다시 추가하십시오. 코드에서

:

height: childrenRect.height + 6 

나는 childrenRect 어디 정의 표시되지 않습니다. 어쩌면 tMsg.height으로 대체하고 목록의 맨 아래에 사각형의 상단을 고정 시키면됩니까? 그것은 내 샘플 파일에서 작동합니다 (단어 자체가 완전하지 않기 때문에 단어를 사용할 수 없습니다).childrenRect을 tMsg으로 바꾸면 바인딩 루프 오류가 발생합니다. 그런데

는 :

anchors.bottom: rectInput.top 

이 대안 목록보기에서 수행하는 것입니다 : 내가하지 RECT 내부 상단 텍스트 영역의가의 RECT의 맨 위에 목록보기의 바닥을 넣어 :

텍스트보기가 아직 만들어지지 않은 시작 경고와 별도로 너무 잘 작동합니다.