我们必须制作由滑块组成的进度条，随着滑块的进行，它会有颜色转换，如下图所示。
我试了试下面的逻辑，但没有得到想要的效果。任何帮助或建议如何实现相同的。
下面是我的代码片段
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，但没有成功。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-11-01 08:12:12
要访问中继器中的项目，可以使用索引索引(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"
}
}Stack Overflow用户
发布于 2012-11-01 08:12:02
计时器工作正常。问题完全不同:您试图在onTriggerd处理程序中访问smallrect，这是Repeater外部的一个未定义的引用。试着用更具声明性的方式来解决问题：
- 在
container中使用整数属性来存储进度条的当前位置 - 在
smallrect中使用该属性的值来设置颜色(index < position? "green":... ) - 使用D12或更好的D13更新该属性要更新该属性，只需将D17中的正确矩形设置为蓝色H218或更好的F219
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13172355
复制相关文章
![【WebService】——SOAP、WSDL和UDDI[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/7007227d95433f70f5901a1a88a1a5ed.jpg)
点击加载更多
腾讯云开发者
