Qt 矩形内的QML换行委托

如何将为listview制作的自定义委托包装在矩形内，以便自定义背景并向listview项目添加圆角半径？目前，我拥有下图左侧所示的内容。我的目标是右边的listview，同时保持当前的TextWrapping和当前解决方案中没有的内容

---

基本上，您只需将代理的行布局封装在一个用作背景色的矩形中：

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

---

您会注意到，我还添加了一个不可见项作为容器，用于将行布局保存在背景中，以便在边缘周围有边距，如您在图形中所示。

您可以在不添加其他项的情况下执行边距操作。使用手动x、y和宽度/高度或锚定。@DFaller为什么对项目{}执行parent.width-20？这是为了完成边距。如果该项的宽度比其父项的宽度小20px，且位于其父项的中心，则会在两侧留下10px的边距间隙。

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