Change properties of delegates in ListView

[SteelBlade]

Hello everyone,

even though I am quite new in this community, I hope that someone can help me with a huge problem for me.

I am trying to change the opacity of a delegate, but I have no idea how to adress it.

How can I change the opacity of a certain delegate, when I click the MouseArea?

Thanks for the help!


The Fraction:

ListView {
                id: imageList
 
                property int selection: 0
 
                anchors.centerIn: parent
                width: 75
                height: 500
                spacing: 80
 
                FolderListModel {
                    id: imageFolderModel
                    showDirs: true
                    folder: "/opt/org.seadot.desktop/qml/Apps/"
                    nameFilters: [ "*.svg" ]
                }
 
                Component {
                    id: imageFileDelegate
 
                    Item {
                        Image{
                            id: launcherItem
                            width: 75
                            height: 75
                            sourceSize.width: 75
                            sourceSize.height: 75
                            source: "file:///opt/org.seadot.desktop/qml/Apps/"+fileName+"/icon.svg"
 
                            MouseArea {
                                anchors.fill: parent
 
                                onClicked: {
                                    imageList.selection = index;
                                    imageList.model.opacity = 0.5
                                }
                            }
                        }
                    }
                }
 
                model: imageFolderModel
                delegate: imageFileDelegate
            }

ListView {
                id: imageList

                property int selection: 0

                anchors.centerIn: parent
                width: 75
                height: 500
                spacing: 80

                FolderListModel {
                    id: imageFolderModel
                    showDirs: true
                    folder: "/opt/org.seadot.desktop/qml/Apps/"
                    nameFilters: [ "*.svg" ]
                }

                Component {
                    id: imageFileDelegate

                    Item {
                        Image{
                            id: launcherItem
                            width: 75
                            height: 75
                            sourceSize.width: 75
                            sourceSize.height: 75
                            source: "file:///opt/org.seadot.desktop/qml/Apps/"+fileName+"/icon.svg"

                            MouseArea {
                                anchors.fill: parent

                                onClicked: {
                                    imageList.selection = index;
                                    imageList.model.opacity = 0.5
                                }
                            }
                        }
                    }
                }

                model: imageFolderModel
                delegate: imageFileDelegate
            }

To copy to clipboard, switch view to plain text mode 

[wysota]

Add a property in ListView and refer to that property from within the delegate.

ListView {
  id: lv
  property real delegateOpacity: 0.5
 
  model: ...
 
  delegate: Rectangle {
    opacity: delegateOpacity
    // ...
  }
}

ListView {
  id: lv
  property real delegateOpacity: 0.5

  model: ...

  delegate: Rectangle {
    opacity: delegateOpacity
    // ...
  }
}

To copy to clipboard, switch view to plain text mode 

[SteelBlade]

Thanks, that was the solution!

Really appreciate it!