qml slider 斑马线

Slider{

id:sliderbar

x:296

y:172

width: 530

height: 40

from: 0

to:1000

value: 500

stepSize: 1

onMoved:{

console.log("pos1 is %d",sliderbar.visualPosition*rect1.width)

console.log("pos1 is %d",sliderbar.value)

param = value

rect2.width = sliderbar.visualPosition*rect1.width

}

// onValueChanged:

// {

// console.log("pos2 is %d",sliderbar.value)

// }

background:Rectangle{

id:rect1

x:0

y:0

width: sliderbar.width

//clip: true

Row{

x:0

y:0

Repeater{

model:19

Rectangle{

width: 28

height: 40

Rectangle{

width: 5

height: 40

color: "#F5F5F5"

}

}

}

Rectangle{

width: 5

height: 40

color: "#F5F5F5"

}

}

Rectangle

{

id:rect2

x:0

y:0

width: sliderbar.visualPosition*rect1.width

height: 40

color: "red"

clip: true

Row{

x:0

y:0

Repeater{

model:19

Rectangle{

width: 28

height: 40

Rectangle{

width: 5

height: 40

color: "#0086D1"

}

}

}

Rectangle{

width: 5

height: 40

color: "#0086D1"

}

}

}

}

}