Question

I’m developing a progress bar in QML.

But the working is not working for all parameter values.
Its more bit of logical issue in UI

Requesting everyone to review it.

below is the code snippet

Rectangle
{
    width: 500; height: 480

    .....

    color: "lightyellow"

    Rectangle {
        id: container
        ....

        Row {
            id:repeaterid


            Repeater {
                id: repeater
                model: 100
                Item { id: smallrect2; opacity:0.5; width:_width; height:_height

                    Rectangle { id: smallrect; color: _newColor }

                 ......  

                }
            }
        }

        Timer {
            id: progressTimer
            interval: 100

            onTriggered: {

                if ((slider.x + slider.width) < repeaterid.width)
                {
                    slider.x += _width
                    var item = repeater.itemAt(indexCurrent)
                    item._newColor = "red"
                    indexCurrent++
                }
                else
                {
                    progressTimer.repeat = false
                }
            }
        }

        Rectangle {
            id: slider

            // Adjust the dimensions of slider
            x: repeaterid.x 
            y: repeaterid.y
            width: _width 
            height: _height 

        }
    }

}

The desired behaviour is achieved when value of _width is 30 and the model value in the repeater is 18, but as the value is decreased the slider in progress bar doesn’t complete its path ( width = 5, model =100 ) or if increased it moves out of the path.

Answer 1

Solved : Adjusted model value according to container size & rectangle size