QML自定義進度條

功能

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
    }
}

源碼下載

源碼

關注

微信公衆號搜索"Qt_io_"或"Qt開發者中心"瞭解更多關於Qt、C++開發知識.。

筆者 - jxd