Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct


    Qt World Summit: Early-Bird Tickets

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

    QML and Qt Quick
    3
    7
    1373
    Loading More Posts
    • 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
      sharath last edited by 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

      1 Reply Last reply Reply Quote 0
      • IntruderExcluder
        IntruderExcluder last edited by

        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 Reply Quote 1
        • Shrinidhi Upadhyaya
          Shrinidhi Upadhyaya last edited by

          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 Reply Quote 0
          • S
            sharath @Shrinidhi Upadhyaya last edited by 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.

            1 Reply Last reply Reply Quote 0
            • S
              sharath @IntruderExcluder last edited by 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.

              1 Reply Last reply Reply Quote 0
              • Shrinidhi Upadhyaya
                Shrinidhi Upadhyaya last edited by

                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 Reply Quote 1
                • S
                  sharath @Shrinidhi Upadhyaya last edited by

                  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 Reply Quote 0
                  • First post
                    Last post