qt - 定时器不能正常工作

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":... ）
• 使用 aTimer或更好的 aNumberAnimation来更新该属性
• 摆脱slider矩形，只需将正确的矩形设为Repeater蓝色

Answer 2

要访问中继器中的项目，您可以使用itemAt(index)函数。这将允许您更改中继器子级的颜色。我还添加了一个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"
  }
}