QML改变项目的高度相对于其下方项目的高度变化

Question

我在它下面有一个列表视图和一个文本区域。我希望列表视图的高度相对于文本区域的大小增加或减少。我尝试将 listview 的底部锚定到 textarea 的顶部，但没有成功。然后我尝试将 textarea 的顶部锚定到 listview 的底部，也没有用。两个都试过了，都不行。每次它给出为属性“height”检测到的绑定循环的运行时错误/警告 我也在 textarea 的范围内尝试过这个，但是我有相同的运行时错误/警告并且没有结果：

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

另一种方法是在列表视图中执行：

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

除了在文本视图尚未创建时在启动时发出警告外，它也可以正常工作。