Timer not working correctly

Question

We have to make progress bar consisting with slider, which has colour transition as the slider proceeds as shown in the figure below.

I tried my hand with below logic but could not get the desired effect. Any help or suggestion how to implement the same.

Below is my code snippet

import QtQuick 1.1

Rectangle {
    id: container

    width: 500; height: 400

    Row {
        id:repeaterid
        x: 75
        y: 280
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 114
        spacing: 4
        Repeater {
            model: 50
            Rectangle {
                id: smallrect
                color: "red"
                width:4
                height:4
            }
        }
    }

    Timer {
        id: progressTimer
        interval: 50
        running: true
        repeat: true
        onTriggered: {
            if (slider.x < 460)
            {
                slider.x += repeaterid.spacing + 4
                smallrect.color = "green"
            }
        }
    }

    Rectangle {
        id: slider
        x: repeaterid.x
        y: repeaterid.y
        width: 6; height: 6
        color: "blue"
    }
}

I have tried to use ColorAnimation, but got any luck.

Answer 1

The timer works correctly. The problem is entirely different: Your try to access smallrect in the onTriggerd handler, an undefined reference outside of the Repeater. Try to solve the problem more declarative:

• use an integer property in the container to store the current position of progress bar
• in smallrect use the value of that property to set the color (index < position? "green": ... )
• use a Timer or better a NumberAnimation to update that property
• get rid of slider rectangle, just give the right rectangle in the Repeater a blue color

Answer 2

To access the items within the repeater you can use the itemAt(index) function. This will allow you to change the color of the repeaters children. I also added a indexCurrent property to keep track of the current index.

Try this code:

import QtQuick 1.1

Rectangle {
  id: container

  width: 500; height: 400

  property int indexCurrent: 0

  Row {
    id:repeaterid
    x: 75
    y: 280
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 114
    spacing: 4
    Repeater {
        id: repeater
        model: 50
        Rectangle {
            id: smallrect
            color: "red"
            width:4
            height:4
        }
    }
  }

  Timer {
    id: progressTimer
    interval: 50
    running: true
    repeat: true
    onTriggered: {
        if (slider.x < 460)
        {
            slider.x += repeaterid.spacing + 4
            repeater.itemAt(indexCurrent).color = "green"
            indexCurrent = indexCurrent + 1
        }
    }
  }

  Rectangle {
    id: slider
    x: repeaterid.x
    y: repeaterid.y
    width: 6; height: 6
    color: "blue"
  }
}