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)

2026-03-09 07:51:16 +01:00
parent ab5f9b1952
commit 609f777d13
10 changed files with 220 additions and 8 deletions
--- a/EditableItemDelegate.qml
+++ b/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()
+}