repeater items in rowlayout overlap



  • Hi,

    I have a Repeater inside the RowLayout to display circle shapes in a row. The model of the repeater comes from the ListModel count.

    For example, i have 2 items in ListModel, it created 2 circles but then you can only see 1 because they're overlapping each other.

    Another case is if you have 3 items, you can only see 2 circles because circle #1 and #3 overlapped each other.

    Here's my code:

    //Indicator.qml
    Item {
       id: indicator
       property int count: 0
       
       RowLayout {
         Repeater {
           model: indicator.count
           Rectangle {
             height: 10
             width: 10
             radius: width*0.5
           }
         }
       }
    }
    
    //Page.qml
    Item {
       ListModel {
         id: mModel
         Component.onCompleted: {
            //append list elements coming from backend list.
         }
       }
    
       Indicator {
         count: mModel.count
       }
    }
    

    The issue won't occur if i explicitly set a number on count, which shouldn't be the case because it is dynamic.

    Please advise. Thanks


  • Moderators

    @literA2
    What if you load the Repeater items only after ListModel is completely filled ?
    In your example whenever a new item is added in ListModel its count is changed which triggers count of Indicator and which in turn resets the Repeaters model and thus it loads all the items again. May be this is causing the problem ? Because if you explicitly set the count the it doesnot happen.



  • @p3c0 said in repeater items in rowlayout overlap:

    @literA2
    What if you load the Repeater items only after ListModel is completely filled ?

    Can you please advise how to do so. How to delay the loading of repeater. Thanks

    I have tried creating a global variable and will be updated if the append of the ListModel is done. Then set it as indicator model, but to no avail.


  • Moderators

    @literA2 I modified your example with some small changes which works. Can you try this?

    import QtQuick 2.5
    Item {
        width: 200
        height: 200
        ListModel {
            id: mModel
            Component.onCompleted: {
                for(var a=0; a<10; a++)
                    append({ 'name': 'Item'+a })
                
            }
        }
    
        Item {
            id: indicator
            anchors.fill: parent
            property int count: 0
    
            RowLayout {
                anchors.fill: parent
                Repeater {
                    model: mModel.count
                    Rectangle {
                        color: "red"
                        height: 10
                        width: 10
                        radius: width*0.5
                    }
                }
            }
        }
    }
    


  • @p3c0 Thanks. The same issue. :(


  • Moderators

    @literA2 Isn't it working? Did you try the example without any modifications?



  • @p3c0 said in repeater items in rowlayout overlap:

    @literA2 Isn't it working? Did you try the example without any modifications?

    Yes.


  • Moderators

    @literA2 Strange. This is what I get:

    Screenshot from 2016-09-19 14:23:08.png


Log in to reply
 

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