[英]QML Controls overlapping
What am I doing wrong here. 我在这里做错了。 My items are overlapping each other in my listview using my custom delegate.
使用自定义委托,我的项目在列表视图中彼此重叠。 Here is what i get...
这就是我得到的...
Here is what im trying to do... 这是我正在尝试做的...
QML 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
}
}
}
Actually, your problem is that you've placed your labels inside your zero-sized invisible rectangle (since it has height==0
and width==0
), both at position (0, 0)
. 实际上,您的问题是,您已将标签放置在零尺寸的不可见矩形内(因为它具有
height==0
和width==0
),都位于位置(0, 0)
。 Instead of putting Label
s into Column
you put Rectangle
in it. 而不是将
Label
放入Column
而是将Rectangle
放入其中。 That's why you've got that overlapping. 这就是您重叠的原因。
Personally I'd recommend you to use Layouts
, eg: 我个人建议您使用
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 }
}
}
And you'll have: 您将拥有:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.