QML 将委托包裹在矩形内

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

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