QML Wrap delegate inside Rectangle - qt

Question

How can i wrap a custom delegate i made for my listview, inside of a rectangle in order to customize the background and add corner radius to my listview items? Currently i have what is shown on the left in the image below. My goal is the listview on the right, while maintaining the current TextWrapping and whatnot seen in the current solution.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Frame {
anchors.centerIn: parent
anchors.fill: parent
ListView {
implicitWidth: parent.width
implicitHeight: parent.height
clip: true
spacing: 12
model: ListModel {
ListElement {
description: "Wash the car this could be a really long message with some multiline support we will see how it works."
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
ListElement {
description: "Wash the car this could be a really long message with some multiline support we will see how it works. This should word wrap quite a lot of times."
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
ListElement {
description: "Wash the car"
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
}
delegate: RowLayout {
width: parent.width
Rectangle {
id: newsicon
width: 16
height: 16
color: "steelblue"
Layout.alignment: Qt.AlignTop
}
ColumnLayout {
Layout.fillWidth: true
spacing: 4
TextArea {
selectByMouse: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
id: messageText
text: model.description
wrapMode: TextEdit.WordWrap
readOnly: true
topPadding: 0
bottomPadding: 0
background: null
}
Label {
id: dateText
text: "Dec 20, 2019"
font.italic: true
font.pointSize: 8
color: "grey"
}
}
}
ScrollBar.vertical: ScrollBar {
active: true
}
}
}

Answer 1

Essentially all you need to do is encapsulate your delegate's RowLayout in a Rectangle that acts as the background color:
delegate: Rectangle {
id: delegateBackground
color:"lightgreen"
radius: 10
width: parent.width
height: contentContainer.height + 20
Item {
id: contentContainer
width: parent.width - 20
height: column.height
anchors.centerIn: delegateBackground
RowLayout {
width: parent.width
Rectangle {
id: newsicon
width: 16
height: 16
color: "steelblue"
Layout.alignment: Qt.AlignTop
}
ColumnLayout {
id: column
Layout.fillWidth: true
spacing: 4
TextEdit {
selectByMouse: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
id: messageText
text: model.description
wrapMode: TextEdit.WordWrap
readOnly: true
}
Label {
id: dateText
text: "Dec 20, 2019"
font.italic: true
font.pointSize: 8
color: "grey"
}
}
}
}
}
You'll notice that I also added an invisible Item as a container to hold the RowLayout inside the background so that there are margins around the edges as you have indicated in your graphic.