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

[sharath]

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

[IntruderExcluder]

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.

[Shrinidhi Upadhyaya]

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.

[sharath]

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.

[sharath]

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.

[Shrinidhi Upadhyaya]

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.

[sharath]

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";
                        }
                    }