Text over the Swipe, how to fix?

Question

I have ListView with items like this:

And I want use swipe. But when I add SwipeDelegate I get this:

How I can make swipe elements over the text? I try use z properties, but with z my swipe not animated when opened and I can't close it.

Here my code:

//SomePage.qml:
import QtQuick 2.12
import QtQuick.Controls 2.12

ScrollView {
    ListView {
        id: someListView
        model: SomeItems {}

        delegate: SwipeDelegate {
            width: someListView.width

            Row {
                leftPadding: 5
                width: parent.width

                Image {
                    id: someImg
                    height: 38
                    source: myImage
                    width: height
                }

                Column {
                    leftPadding: 5
                    width: parent.width - someImg.width - 10

                    // Name
                    Text {
                        id: someName
                        text: myCount.toString() + " × " + myName
                    }

                    // Number
                    Text {
                        id: someNumber
                        text: myNumber.toLocaleString(Qt.locale("ru-RU"), "f", 0)
                        anchors.right: parent.right
                        font.pixelSize: 12
                        rightPadding: 5
                    }
                }
            }

            swipe.right: Row {
                anchors.right: parent.right
                height: parent.height

                // Delete button
                Label {
                    text: "\ue800"
                    color: "black"
                    font.family: fontFontello.name
                    height: parent.height
                    padding: 12
                    verticalAlignment: Label.AlignVCenter
                    width: this.height

                    background: Rectangle {
                        color: "lightblue"
                        height: parent.height
                        width: parent.width

                        MouseArea {
                            anchors.fill: parent
                            onClicked: someListView.model.remove(index)
                        }
                    }
                }

                // Hide button
                Label {
                    text: "\ue80a"
                    color: "black"
                    font.family: fontFontello.name
                    height: parent.height
                    padding: 12
                    verticalAlignment: Label.AlignVCenter
                    width: this.height

                    background: Rectangle {
                        color: "lightgray"

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                ...
                                swipe.close()
                            }
                        }
                    }
                }
            }
        }
    }
}

Answer 1

The problem is you're adding your text/image on top of the default contentItem instead of inside it. It will look correct if you add your Row to contentItem, like this:

delegate: SwipeDelegate {
    contentItem: Row {
        ...
    }
}