定时器无法正常工作

Question

我们必须制作包含滑块的进度条，滑块按照下图所示进行颜色转换。

我尝试了以下逻辑，但未能达到预期的效果。任何帮助或建议如何实现相同的。

以下是我的代码段

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

我曾尝试使用ColorAnimation，但运气不错。

Answer 1

计时器正常工作。问题完全不同：您尝试访问smallrect处理程序中的onTriggerd，Repeater之外的未定义引用。尝试更具说明性地解决问题：

• 使用container中的整数属性来存储进度条的当前位置
• 在smallrect中使用该属性的值来设置颜色（index < position? "green": ...）
• 使用Timer或更好的NumberAnimation来更新该属性
• 摆脱slider矩形，只需在Repeater中给出正确的矩形蓝色

Answer 2

要访问转发器中的项目，您可以使用 itemAt（索引）功能。这将允许您更改转发器子级的颜色。我还添加了一个 indexCurrent 属性来跟踪当前索引。

试试这段代码：

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