QML控件重叠

时间:2019-05-14 19:41:36

标签: qt qml

我在这里做错了什么。使用自定义委托,我的项目在列表视图中彼此重叠。这就是我得到的...

qt,

这是我想做的...

enter image description here

QML

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Frame {
    ListView {
        implicitWidth: 250
        implicitHeight: 250
        clip: true

        model: ListModel {
            ListElement {
                done: true
                description: "Wash the car this could be a really long message with some multiline support\n we will see how it works."
            }
            ListElement {
                done: false
                description: "Fix the car"
            }
            ListElement {
                done: false
                description: "Sell the car"
            }
            ListElement {
                done: true
                description: "Wash the car"
            }
            ListElement {
                done: false
                description: "Fix the car"
            }
            ListElement {
                done: false
                description: "Sell the car"
            }
            ListElement {
                done: true
                description: "Wash the car"
            }
            ListElement {
                done: false
                description: "Fix the car"
            }
            ListElement {
                done: false
                description: "Sell the car"
            }
        }

        delegate: Row {
            spacing: 6
            width: parent.width

            Rectangle {
                id: newsicon
                width: 16
                height: 16
                color: "steelblue"
            }

            Column {
                Rectangle {
                    color: "lightgrey"

                    Label {
                        id: messageText
                        text: model.description
                        width: parent.width
                        wrapMode: Label.Wrap
                    }
                    Label {
                        id: dateText
                        text: "Dec 20, 2019"
                        wrapMode: Label.Wrap
                    }
                }
            }
        }

        ScrollBar.vertical: ScrollBar {
            active: true
        }
    }
}

1 个答案:

答案 0 :(得分:2)

实际上,您的问题是将标签放置在大小为零的不可见矩形内(因为它具有height==0width==0),都位于位置(0, 0)。而不是将Label放入Column中,而是将Rectangle放入其中。这就是为什么您要重叠的原因。


我个人建议您使用Layouts,例如:

Frame {
    anchors.centerIn: parent
    ListView {
        implicitWidth: 250
        implicitHeight: 250
        clip: true

        model: listModel
        delegate: RowLayout {

            Rectangle {
                id: newsicon
                width: 16
                height: 16
                color: "steelblue"
            }

            ColumnLayout {
                Layout.fillWidth: true
                spacing: 0
                Label {
                    id: messageText
                    text: model.description
                    width: parent.width
                    wrapMode: Label.WrapAtWordBoundaryOrAnywhere
                }
                Label {
                    id: dateText
                    text: "Dec 20, 2019"
                    font.italic: true
                    color: "grey"
                    wrapMode: Label.WrapAtWordBoundaryOrAnywhere
                }
            }

        }
        ScrollBar.vertical: ScrollBar { active: true }
    }
}

您将拥有:

Layouts example