Added an editable item delegate. Only Factor plus/minus button are working for now. (based on https://doc.qt.io/qt-6/qtquick-views-example.html as well)

CMakeLists.txt

@@ -20,10 +20,14 @@ qt_add_qml_module(${TARGET_APP}
         ListPage.qml
         ListItemDelegate.qml
         ExpandableItemDelegate.qml
+        EditableItemDelegate.qml
+        controls/PressAndHoldButton.qml
     RESOURCES
-        "icons/software-application.png"
+        icons/software-application.png
-        "icons/moreUp.png"
+        icons/moreUp.png icons/moreDown.png
-        "icons/moreDown.png"
+        icons/arrow-down.png icons/arrow-up.png
+        icons/list-delete.png
+        icons/minus-sign.png icons/plus-sign.png
 )
 
 # Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

EditableItemDelegate.qml

@@ -0,0 +1,163 @@
+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()
+}

ExpandableItemDelegate.qml

@@ -1,8 +1,7 @@
 import QtQuick
-import QtQuick.Controls.Material
+import QtQuick.Controls
 import QtQuick.Layouts
 
-//! [0]
 Item {
     id: item
 
@@ -95,7 +94,6 @@ Item {
             bottomMargin: 10
         }
         opacity: item.detailsOpacity
-        //! [2]
         Text {
             id: moreInfoTitle
             anchors.top: parent.top
@@ -213,4 +211,4 @@ Item {
             }
         }
     }
-} //! [3]
+}

ListPage.qml

@@ -12,9 +12,11 @@ Page {
         clip: true
 
         model: mainModel
+        delegateModelAccess: DelegateModel.ReadWrite
 
         // delegate: ListItemDelegate {}
-        delegate: ExpandableItemDelegate {}
+        // delegate: ExpandableItemDelegate {}
+        delegate: EditableItemDelegate {}
 
         header: bannercomponent
         footer: Rectangle {

controls/PressAndHoldButton.qml

@@ -0,0 +1,45 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Image {
+    id: container
+
+    property int repeatDelay: 300
+    property int repeatDuration: 75
+    property bool pressed
+
+    signal clicked
+
+    scale: pressed ? 0.9 : 1
+
+    function release() {
+        autoRepeatClicks.stop()
+        container.pressed = false
+    }
+
+    SequentialAnimation on pressed {
+        id: autoRepeatClicks
+        running: false
+
+        PropertyAction { target: container; property: "pressed"; value: true }
+        ScriptAction { script: container.clicked() }
+        PauseAnimation { duration: container.repeatDelay }
+
+        SequentialAnimation {
+            loops: Animation.Infinite
+            ScriptAction { script: container.clicked() }
+            PauseAnimation { duration: container.repeatDuration }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+
+        onPressed: autoRepeatClicks.start()
+        onReleased: container.release()
+        onCanceled: container.release()
+    }
+}
+