Overlapping Delegate in listview
-
I have a list of items, onClicking each item a rectangle with its associated properties open. When I click the second item the rectangle of the second item opens up overlapping the first. I don't want this to happen, the second rectangle should open only when first is closed (OR) on clicking second item it should automatically close the first rectangle. The list is an xml list, and the delegate has the common property to all its list element.
I tried to change the
opacity - didnt work
visibility - didnt work
MouseArea- enabled: false didnt work.
tried to access the particular index by xmlmodel.get(index)- didnt work.Anyone who has an idea on how to deal with it, kindly drop in your suggestion. Thanks for your time.
-
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.
-
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.
-
-
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'@ -
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.0Rectangle{
id:mainRect
width:400; height:widthfunction 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 }
}
@ -
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.
-
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. still nothing appears.:(
-
can i upload the project file, will tat be easier??
-
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. -
OK will try that. Here is the file if you have time kindly go through this.
Thanks..
-
I will try if you give some clean code.
-
http://www.2shared.com/file/-KWQrl3Z/xml_view.html
Cleaned up my code mate. Thanks. Iwill also try to do it with simple code.
-
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 }
}@
-
Thanks mate :).. Appreciated!
-
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
-
In your code there is still shortview.state='shortview', but this state is not defined.
You had to study the documentaion a little. -
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
-
-Please edit you Question and add [Solved] infront of it, if you got the answer.-