QML学习 —— 2、自定义进度条

 

功能

1. 使用Quick2进行自定义进度条
2. 动画控制进度条移动
3. 封装自定义进度条

 

效果

 

关键代码

background: Rectangle
{
    x: control.leftPadding
    y: control.topPadding + control.availableHeight / 2 - height / 2
    implicitWidth: 200
    implicitHeight: 4
    width: control.availableWidth
    height: implicitHeight
    radius: 2
    color: "#bdbebf"

    Rectangle
    {
        width: control.visualPosition * parent.width
        height: parent.height
        color: "#21be2b"
        radius: 2
    }
}

 

源码