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.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
    }
    

    }
    @



  • @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.



  • 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!



  • @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



  • 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.-


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.