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
Forum Updated to NodeBB v4.3 + New Features

Overlapping Delegate in listview

Scheduled Pinned Locked Moved QML and Qt Quick
20 Posts 4 Posters 8.6k Views 1 Watching
  • 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 26 Sept 2012, 15:14 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 27 Sept 2012, 07:49 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 27 Sept 2012, 08:01 last edited by
        #4

        Reshma

        1 Reply Last reply
        0
        • D Offline
          D Offline
          dmcr
          wrote on 27 Sept 2012, 09:06 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 27 Sept 2012, 09:14 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 27 Sept 2012, 10:00 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 27 Sept 2012, 11:35 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 27 Sept 2012, 11:40 last edited by
                  #9

                  @dmcr. still nothing appears.:(

                  Reshma

                  1 Reply Last reply
                  0
                  • R Offline
                    R Offline
                    ReshmaS
                    wrote on 27 Sept 2012, 11:42 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 27 Sept 2012, 12:09 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 27 Sept 2012, 12:36 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 27 Sept 2012, 12:45 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 27 Sept 2012, 13:03 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 27 Sept 2012, 13:29 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 27 Sept 2012, 13:34 last edited by
                                #16

                                Thanks mate :).. Appreciated!

                                Reshma

                                1 Reply Last reply
                                0
                                • R Offline
                                  R Offline
                                  ReshmaS
                                  wrote on 28 Sept 2012, 08:10 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 28 Sept 2012, 13:37 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 8 Oct 2012, 12:35 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 23 Oct 2012, 14:01 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