計時器無法正常工作

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

要訪問中繼器內的項目，您可以使用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" 
    } 
} 

Answer 2

計時器工作正常。問題完全不同：您嘗試訪問onTriggerd處理程序中的smallrect，這是Repeater之外的未定義引用。嘗試解決問題更具聲明：

• 使用在container整數屬性，以進度條的當前位置
• 存儲smallrect使用該屬性的值來設置顏色（index < position? "green": ...）
• 使用Timer或更好的NumberAnimation來更新財產
• 擺脫slider矩形的，只是給在Repeater右側矩形藍色