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. Overlapping Delegate in listview

Overlapping Delegate in listview

Scheduled Pinned Locked Moved QML and Qt Quick
20 Posts 4 Posters 8.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.
  • D Offline
    D Offline
    dmcr
    wrote on last edited by
    #2

    You can for example have state for each element (ie in the delegate).

    Then you give at the listItem the state in function of the index == currentIndex of the ListView.

    dmcr

    1 Reply Last reply
    0
    • R Offline
      R Offline
      ReshmaS
      wrote on last edited by
      #3

      I have not got your idea, could you explain it in detail or cite an example. Am a beginner so am nt too sure of what you are saying.

      Reshma

      1 Reply Last reply
      0
      • R Offline
        R Offline
        ReshmaS
        wrote on last edited by
        #4

        Reshma

        1 Reply Last reply
        0
        • D Offline
          D Offline
          dmcr
          wrote on last edited by
          #5

          you could :

          give an id to your ListView like @id : idLV@

          replace your onClicked: if(shortview.state.....

          by
          @state : index==idLV.isCurrentItem ? 'Details' : 'shortview' @

          In the initial code the state of the first clicked element is not updated when you clicked on a another one.

          Edit
          obviously :)
          @ onClicked: state = idLV.isCurrentItem ? 'Details' : 'shortview'@

          dmcr

          1 Reply Last reply
          0
          • T Offline
            T Offline
            tapadar
            wrote on last edited by
            #6

            The code you gave as an example is too long for people to read and reply. If I have understood correctly thge problem indicated in the first comment, then here is a simple solution. However, I admit this could be done in multiple ways.
            @
            import QtQuick 2.0

            Rectangle{
            id:mainRect
            width:400; height:width

            function showActionList(mousX, mousY){
                if(actionList.opacity>0){
                    console.log("visible");
                    mainRect.hideActionList();
                }
            
                actionList.x = mousX; actionList.y = mousY;
                actionList.opacity = 1;
            }
            
            function hideActionList(){
                actionList.opacity = 0;
            }
            
            Timer {
                interval: 50; running: false; repeat: false
                onTriggered: mainRect.hideActionList();
            }
            
            ListModel{
                id: mainlistModel
                ListElement{ title:"One";pubDate:"Aug"; param:" 2010" }
                ListElement{ title:"Two";pubDate:"Sep"; param:" 2011" }
                ListElement{ title:"Three";pubDate:"Oct"; param:" 2012" }
            }
            
            ListView{
                id:mainListView
                anchors.fill: parent
                model: mainlistModel
                delegate: Rectangle{
                    width: parent.width; height: 40;
                    Text {id:txt; anchors.centerIn: parent; text:title+ ": " + pubDate+param }
                    Rectangle{ anchors{ top:txt.bottom; horizontalCenter: parent.Center }width: parent.width - 2; height: 1; color: "black"}
                    MouseArea{
                        anchors.fill:parent
                        onClicked: mainRect.showActionList(mouseX,mouseY);
                    }
                }
            }
            
            ListModel {
                id: listModel
                ListElement{action:"View"}
                ListElement{action:"Edit"}
                ListElement{action:"Delete"}
            }
            
            Component {
                id: actionDelegate
                Rectangle{
                    width: 40; height: 30; radius: 3
                    border{width: 2; color: "black"}
                    Text{id:dText;anchors.centerIn: parent; text:action}
                }
            }
            
            ListView{
                id: actionList
                model:listModel
                width: 180; height: 300
                delegate:  actionDelegate
                opacity: 0
            }
            

            }
            @

            1 Reply Last reply
            0
            • R Offline
              R Offline
              ReshmaS
              wrote on last edited by
              #7

              @dmcr:

              MouseArea {
              id:marea
              anchors.fill:parent
              onClicked: state.index===idLV.isCurrentItem ? 'Details' : 'shortview'

                      }@
              

              I gave a name to my listview

              Now nothing is happening onClicked event.

              Reshma

              1 Reply Last reply
              0
              • D Offline
                D Offline
                dmcr
                wrote on last edited by
                #8

                try
                @ MouseArea {
                id:marea
                anchors.fill:parent
                onClicked: state = index==idLV.isCurrentItem ? 'Details' : 'shortview'

                        }@
                

                Edit
                or obviously :)
                @ onClicked: state = index==idLV.currentIndex ? 'Details' : 'shortview'@

                dmcr

                1 Reply Last reply
                0
                • R Offline
                  R Offline
                  ReshmaS
                  wrote on last edited by
                  #9

                  @dmcr. still nothing appears.:(

                  Reshma

                  1 Reply Last reply
                  0
                  • R Offline
                    R Offline
                    ReshmaS
                    wrote on last edited by
                    #10

                    can i upload the project file, will tat be easier??

                    Reshma

                    1 Reply Last reply
                    0
                    • D Offline
                      D Offline
                      dmcr
                      wrote on last edited by
                      #11

                      The code you gave is a little too long.
                      Try with a simple example, the shortest ( without sorting and with fewer text for example, etc...), then you can fix the bug.

                      dmcr

                      1 Reply Last reply
                      0
                      • R Offline
                        R Offline
                        ReshmaS
                        wrote on last edited by
                        #12

                        OK will try that. Here is the file if you have time kindly go through this.

                        Thanks..

                        Reshma

                        1 Reply Last reply
                        0
                        • D Offline
                          D Offline
                          dmcr
                          wrote on last edited by
                          #13

                          I will try if you give some clean code.

                          dmcr

                          1 Reply Last reply
                          0
                          • R Offline
                            R Offline
                            ReshmaS
                            wrote on last edited by
                            #14

                            http://www.2shared.com/file/-KWQrl3Z/xml_view.html

                            Cleaned up my code mate. Thanks. Iwill also try to do it with simple code.

                            Reshma

                            1 Reply Last reply
                            0
                            • D Offline
                              D Offline
                              dmcr
                              wrote on last edited by
                              #15

                              here it is mate

                              @import QtQuick 1.1

                              Rectangle{

                              width:400
                              height:width
                              property real ropacity:0
                              
                              XmlListModel {
                                  id: xmlModel
                              
                                  source:"example_grouping.xml"
                              
                                  query: "/rss/channel/item"
                                  XmlRole { name: "id"; query: "id/string()" }
                                  XmlRole { name: "title"; query: "title/string()" }
                                  XmlRole { name: "pubDate"; query: "pubDate/string()" }
                                  XmlRole { name: "param"; query: "param/string()" }
                                  //onStatusChanged: if (status === XmlListModel.Ready) { console.log("XML elements read: ", count); fillListModel(); sortModel(); }
                              }
                              
                              Component {
                                  id: sectionHeading
                                  Rectangle {
                                      id:rect1
                                      width: 50
                                      height:18
                                      color: "lightgrey"
                              
                                      Text {
                                          text: section
                                          font.bold: true
                                      }
                                  }
                              }
                              
                              Component {
                                  id: mainDelegate
                              
                                  Item {
                                      id: shortview
                                      property real detailsOpacity : 0
                                      width: 100
                                      height: 29
                              
                                       state : index==idLV.currentIndex ? 'details' : ''
                              
                                      states: [
                                          State {
                                              name: ""
                                              PropertyChanges { target: shortview;  height:29;}
                                              PropertyChanges { target: tert;  color:"black" }
                                          },
                                          State {
                                              name: "details" ;
                                              PropertyChanges {target: shortview ; height:50; }
                                              PropertyChanges {target: tert ; color:"pink" }
                                          }
                                      ]
                              
                                      Text {
                                          id:tert
                                          text:param
                                          color : "black"
                                      }
                                      MouseArea {
                                          id:marea
                                          anchors.fill:parent
                                          onClicked: idLV.currentIndex = index
                                      }
                                  }
                              }
                              
                              ListView{
                                  id:idLV
                              
                                  model:xmlModel
                                  width: 180; height: 300
                                  delegate:  mainDelegate
                                  section.property: "param"
                                  section.criteria: ViewSection.FullString
                                  section.delegate: sectionHeading
                              }
                              

                              }@

                              dmcr

                              1 Reply Last reply
                              0
                              • R Offline
                                R Offline
                                ReshmaS
                                wrote on last edited by
                                #16

                                Thanks mate :).. Appreciated!

                                Reshma

                                1 Reply Last reply
                                0
                                • R Offline
                                  R Offline
                                  ReshmaS
                                  wrote on last edited by
                                  #17

                                  @dmcr:

                                  The first item is always on 'Details' mode.
                                  I have a close button on clikcing it goes back to the old state, when I click that I am unable to access the list.
                                  Chk this if u have some time. Its the code which am working on.
                                  http://www.2shared.com/file/d0BduoTK/xml.html

                                  "chk this":http://www.2shared.com/file/d0BduoTK/xml.html

                                  Thanks

                                  Reshma

                                  1 Reply Last reply
                                  0
                                  • D Offline
                                    D Offline
                                    dmcr
                                    wrote on last edited by
                                    #18

                                    In your code there is still shortview.state='shortview', but this state is not defined.
                                    You had to study the documentaion a little.

                                    dmcr

                                    1 Reply Last reply
                                    0
                                    • R Offline
                                      R Offline
                                      ReshmaS
                                      wrote on last edited by
                                      #19

                                      I read the documentation it did not work and hence I reverted to the existing code. I will try in another method. in that case the first item is always on the detailed state

                                      Reshma

                                      1 Reply Last reply
                                      0
                                      • M Offline
                                        M Offline
                                        Macro
                                        wrote on last edited by
                                        #20

                                        -Please edit you Question and add [Solved] infront of it, if you got the answer.-

                                        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