GenericQMLApp/EditableItemDelegate.qml

import QtQuick

import "controls"

Item {
    //! [0]
    id: delegateItem
    width: listView.width
    height: 80
    clip: true

    required property int index

    // required property string edit
    // required property QtObject model
    required property string name
    required property string description
    required property string info
    required property int amount
    required property real factor

    Rectangle {
        id: background
        x: 2
        y: 2
        width: parent.width - x * 2
        height: parent.height - y * 2
        color: wccDarkLight
        border.color: index === listView.currentIndex ? "blue" : wccDarkDefault
        border.width: 3
        radius: 5
    }

    Column {
        id: arrows
        anchors {
            left: parent.left
            verticalCenter: parent.verticalCenter
        }
        Image {
            source: "icons/arrow-up.png"
            MouseArea {
                anchors.fill: parent
                // onClicked: fruitModel.move(delegateItem.index,
                //                            delegateItem.index - 1, 1)
            }
        }
        Image {
            source: "icons/arrow-down.png"
            MouseArea {
                anchors.fill: parent
                // onClicked: fruitModel.move(delegateItem.index,
                //                            delegateItem.index + 1, 1)
            }
        }
    }

    Column {
        anchors {
            left: arrows.right
            horizontalCenter: parent.horizontalCenter
            bottom: parent.verticalCenter
        }

        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: delegateItem.name
            font.pixelSize: 15
            color: "white"
        }
        Text {
            text: delegateItem.description
            color: "White"
        }
    }

    Item {
        anchors {
            left: arrows.right
            horizontalCenter: parent.horizontalCenter
            top: parent.verticalCenter
            bottom: parent.bottom
        }

        Row {
            anchors.centerIn: parent
            spacing: 10

            PressAndHoldButton {
                anchors.verticalCenter: parent.verticalCenter
                source: "icons/plus-sign.png"
                onClicked: delegateItem.factor = delegateItem.factor + 0.25
            }

            Text {
                id: factorText
                anchors.verticalCenter: parent.verticalCenter
                text: 'Factor: ' + Number(delegateItem.factor).toFixed(2)
                font.pixelSize: 15
                color: "white"
                font.bold: true
            }

            PressAndHoldButton {
                anchors.verticalCenter: parent.verticalCenter
                source: "icons/minus-sign.png"
                onClicked: delegateItem.factor = Math.max(
                               0, delegateItem.factor - 0.25)
            }

            Image {
                source: "icons/list-delete.png"
                MouseArea {
                    anchors.fill: parent
                    onClicked: fruitModel.remove(delegateItem.index)
                }
            }
        }
    }

    // Animate adding and removing of items:
    //! [1]
    SequentialAnimation {
        id: addAnimation
        PropertyAction {
            target: delegateItem
            property: "height"
            value: 0
        }
        NumberAnimation {
            target: delegateItem
            property: "height"
            to: 80
            duration: 250
            easing.type: Easing.InOutQuad
        }
    }
    ListView.onAdd: addAnimation.start()

    SequentialAnimation {
        id: removeAnimation
        PropertyAction {
            target: delegateItem
            property: "ListView.delayRemove"
            value: true
        }
        NumberAnimation {
            target: delegateItem
            property: "height"
            to: 0
            duration: 250
            easing.type: Easing.InOutQuad
        }

        // Make sure delayRemove is set back to false so that the item can be destroyed
        PropertyAction {
            target: delegateItem
            property: "ListView.delayRemove"
            value: false
        }
    }
    ListView.onRemove: removeAnimation.start()
}