Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

[Solved]Listview onclick event, change the color of each delegate item but its destroying on moving items



  • i am working on listview, i need to change the color of each delegate item so i can do it easily but the problem is when i scroll listview vertically the changed color automatically restored to default color of delegate.

    ListView
            {
                id:listview
                width: parent.width*0.7
                height: parent.height*0.7
                anchors.centerIn: parent
                spacing: 20
                model:10
                cacheBuffer:40
                delegate: Rectangle
                {
                    id:deleagteRect
                    width:listview.width*0.5
                    height:listview.height*0.3
                    color:"blue"
                    MouseArea
                    {
                        anchors.fill: parent
                        onClicked:
                        {
                            listview.currentIndex=index;
                            deleagteRect.border.color="red" //scrolling vertically down and moving up,then these state of the color of red turns to default color .why?
                        }
                    }
                }
            }
    

    please help me with it.

    Thanks



  • This is because each delegate is destroyed by ListView if it is out of view port. You should store additional data in model or somewhere else.



  • Hi @sharath , can you tell me why are trying to change the color of the delegate?, like do you want to highlight the current item, something like that or do you want to have something like selection of items, like if there are 10 rectangles you want 2 or 3 rectangles with red color.



  • Hi @Shrinidhi-Upadhyaya, thanks for the reply.

    Yes exactly, if 10 rectangle are there i need to select the 2 or 3 or more rectangle and i need to highlight those rectangle with color, then after have to delete those selected rectangles.



  • HI @IntruderExcluder , thanks for the reply,

    Yes i knew it, but is there any other way to achieve it?

    because in my case, the model is QSqlquerymodel.



  • Hi @sharath , i guess you can create Custom component and use it, for example:-

    CustomButton.qml

    Rectangle
    {
        id:deleagteRect
        width:100
        height:100
        color: "blue"
        border.color: selected ? "red" : "blue"
        border.width: 2
    
        property bool selected: false
        signal itemClicked();
    
        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                selected = !selected
                itemClicked();
            }
        }
    }
    

    main.qml

    ListView
    {
        id:listview
        width: parent.width*0.7
        height: parent.height*0.7
        anchors.centerIn: parent
        spacing: 20
        model: 10
        clip: true
        delegate: CustomButton {
            width:100
            height:100
    
            onItemClicked:  {
                console.log("Clicked")
            }
        }
    }
    

    After, once you click on the Buttons you can store the index and send it to the back-end and delete those specific index in Model.



  • Hello @Shrinidhi-Upadhyaya,

    thanks for your reply, what @IntruderExcluder said was right , each delegate is destroyed by ListView if it is out of view port.
    i achieved it by storing each index into array onclick and by scrolling each time im checking if that index is present in array im applying color for that perticular delegate.

    Rectangle
                        {
                            id:patimageRect
                            width:listView.width*0.3
                            height:listView.height*0.96
                            anchors.bottom: parent.bottom
                            radius: 10
                            color:Util.exist(index)? "red":"transparent"//Util is Javascript file. here i'm checking if index is present or slelected or not, if selected then i will apply color of it to "red" otherwise "transparent" 
                            Mousearea
                            { 
                                 Util.pushIndex(index);
                                 patimageRect.color="red";
                            }
                        }   
    
    

Log in to reply