Question

我有一个listview和一个textarea。我希望listview的高度相对于textarea的大小增加或减少。我试着将listview的底部锚定到textarea的顶部，没有用。然后我尝试将textarea的顶部锚定到listview的底部，也没有工作。一起试过，不管怎样。每次它给出检测到属性＆＃34;高度＆＃34; 的绑定循环的运行时错误/警告我也在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为我删除绑定循环错误。

顺便说一句：我将列表视图的底部放在rect的顶部，而不是放在rect中的文本区域顶部：

anchors.bottom: rectInput.top

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

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

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

QML根据项目下方项目高度的变化更改项目的高度

1 个答案: