Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. [Solved]Listview onclick event, change the color of each delegate item but its destroying on moving items

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

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
7 Posts 3 Posters 2.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    sharath
    wrote on last edited by sharath
    #1

    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

    1 Reply Last reply
    0
    • IntruderExcluderI Offline
      IntruderExcluderI Offline
      IntruderExcluder
      wrote on last edited by
      #2

      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.

      S 1 Reply Last reply
      1
      • Shrinidhi UpadhyayaS Offline
        Shrinidhi UpadhyayaS Offline
        Shrinidhi Upadhyaya
        wrote on last edited by
        #3

        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.

        Shrinidhi Upadhyaya.
        Upvote the answer(s) that helped you to solve the issue.

        S 1 Reply Last reply
        0
        • Shrinidhi UpadhyayaS 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.

          S Offline
          S Offline
          sharath
          wrote on last edited by sharath
          #4

          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.

          1 Reply Last reply
          0
          • IntruderExcluderI 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.

            S Offline
            S Offline
            sharath
            wrote on last edited by sharath
            #5

            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.

            1 Reply Last reply
            0
            • Shrinidhi UpadhyayaS Offline
              Shrinidhi UpadhyayaS Offline
              Shrinidhi Upadhyaya
              wrote on last edited by
              #6

              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.

              Shrinidhi Upadhyaya.
              Upvote the answer(s) that helped you to solve the issue.

              S 1 Reply Last reply
              1
              • Shrinidhi UpadhyayaS 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.

                S Offline
                S Offline
                sharath
                wrote on last edited by
                #7

                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";
                                        }
                                    }   
                
                
                1 Reply Last reply
                0

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved