矩形内的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"
                    }
                }
            }
        }
    }

您会注意到，我还添加了一个不可见的项目作为容器，将RowLayout保留在背景中，以使您的图形中的边缘周围有空白。