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

Posted 2023-02-16

【中文标题】QML改变项目的高度相对于其下方项目的高度变化

【英文标题】：QML change height of item with respect to change in height of item below it

【发布时间】：2016-06-06 20:08:28

【问题描述】：

我在它下面有一个列表视图和一个文本区域。我希望列表视图的高度相对于文本区域的大小增加或减少。我尝试将 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;
        
    

【问题讨论】：

您不应该删除您的答案。它对我有用。问题是我的列表视图没有滚动到底部，这让我觉得它不起作用。我修好了。我仍然得到绑定循环错误。 @coyotte508

@coyotte508 也许我可以再次看到您的答案以查看绑定循环问题并接受它。

【参考方案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

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

【讨论】：

嗨！感谢您的回复和最佳实践建议。我只是想确认您发布的答案是否适合您？因为我在您的代码的rectInput 中看不到 TextArea，它实际上是大小发生变化的那个。并且列表视图的高度需要根据它来改变。

childrenRect 是 Item 类的属性。登录时它甚至可以正确显示高度。

我试过你的解决方案，不幸的是，当文本字段的行增加时，列表视图的高度不会降低。

@AkashAggarwal 再次编辑，可能会回答绑定循环问题。删除了我的旧 cmets 以及与最终答案无关的内容。

谢谢！绑定循环问题现在也消失了。 childrenRect 属性导致错误很奇怪。