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またはより良い aを使用しNumberAnimationてそのプロパティを更新します
• 長方形を取り除き、青い色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"
  }
}