QML Wrap делегат внутри Rectangle

Question

Как я могу обернуть пользовательский делегат, который я сделал для моего списка, внутри прямоугольника, чтобы настроить фон и добавить угловой радиус для моих элементов списка?В настоящее время у меня есть то, что показано слева на изображении ниже.Моя цель - просмотр списка справа при сохранении текущего TextWrapping и всего, что не видно в текущем решении.

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

По сути, все, что вам нужно сделать, это заключить RowLayout вашего делегата в прямоугольник, который действует как цвет фона:

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

Вы заметите, что я также добавил невидимый Предмет в качестве контейнера для храненияRowLayout внутри фона, чтобы по краям были поля, как вы указали на графике.