Qt QML控件重叠

我做错了什么。使用自定义委托，我的项目在我的listview中相互重叠。这是我得到的

这就是我要做的

QML

---

实际上，您的问题是，您将标签放在了零大小的不可见矩形中（因为它的

高度==0

和

宽度==0

），两者都位于

（0，0）

。您没有将

标签

s放入

列

，而是将

矩形

放入其中。这就是为什么你有重叠

---

我个人建议您使用

布局

，例如：

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 }
    }
}

您将有：

---

我明白了。谢谢你的解释和答案。非常感谢。如何使蓝色矩形与顶部对齐而不是垂直中心？另外，使小部件“listview”适合可用空间。尽可能多地填充父对象的最大大小。默认的最小尺寸为250x250？@JokerMartini

我可以使蓝色矩形与顶部对齐，而不是垂直中心对齐吗。您需要的一个是设置该矩形的宽度<代码>最大/最小尺寸

等--请参阅下一个属性的参考：

填充高度

，

填充宽度

，

最大高度

，

最小高度

，

最小宽度

，

首选高度

，

首选宽度

。希望你能找到答案。好的，非常感谢。我确实注意到换行模式没有按预期工作。我正在努力找到解决办法。

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 }
    }
}