repeater items in rowlayout overlap

literA2

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

p3c0

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

literA2

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

p3c0

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

literA2

@p3c0 Thanks. The same issue. :(

p3c0

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

literA2

@p3c0 said in repeater items in rowlayout overlap:

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

Yes.

p3c0

@literA2 Strange. This is what I get: