Question

我正在尝试创建一个简单的聊天气泡布局，其中每个消息的矩形的高度可以在宽度固定时变化。现在我们需要将新消息放在listview中出现的最后一条消息的正下方。由于高度是可变的，因此无法在任何两个元素之间确定ListView.spacing。那我怎么能实现这个呢？

Listview代码：

    ListView{
    id: listView
    anchors.fill: parent
    anchors.top: parent.top
    anchors.topMargin: 10
    delegate: ChatMessageItem{}
    model: listModel
    spacing: 10
}

ChatMessageItem的代码

Item{
Rectangle {
color: "#6BB9F0"
height: 50
width: (childrenRect.width < 200? childrenRect.width : 200)
radius: 7
Text {
    id: name
    text: username
}
Text {
    id: message
    text: msg
    anchors.top: name.bottom
    wrapMode: Text.WordWrap
    Component.onCompleted: {
        if(width > 200)
            width = 200;
        else if(width < 50)
            width = 50;
    }
}
}
}

Answer 1

您的问题是您的Item没有高度。因此，您的ListView不知道您的代表的身高。这与您的ListView.spacing无关。请尝试以下更改：

Item{
    height: rect.height
Rectangle {
    id: rect

color: "#6BB9F0"
height: name.paintedHeight + message.paintedHeight
width: (childrenRect.width < 200 ? childrenRect.width : 200)
radius: 7
Text {
    id: name
    text: username
}
Text {
    id: message
    text: msg
    anchors.top: name.bottom
    wrapMode: Text.WordWrap
    Component.onCompleted: {
        if(width > 200)
            width = 200;
        else if(width < 50)
            width = 50;
    }
}
}
}

QML ListView将新列表项放在最后一个列表项下面

1 个答案: