ProgressBarサンプル

ProgressBar(QtQuick Controls 2)のサンプル

テスト用QML

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtMultimedia 5.9

ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Audio { id: clickSound; source: "Sounds/btn01.mp3" }
    Audio { id: finishSound; source: "Sounds/btn02.mp3" }

    // タイマ定義
    Timer {
        id: timer
        interval: 100
        repeat: true
        onTriggered: {
            if (progressBar.value < progressBar.to) {
                progressBar.value += 1
            } else {
                finishSound.play()
                stop()
                button.enabled = true
            }

            console.log("position = " + progressBar.position)
            console.log("value = " + progressBar.value)
            console.log("visualPosition = " + progressBar.visualPosition)
        }
    }

    Row {
        spacing: 2

        // indeterminate プログレスバー定義
        ProgressBar {
            width: root.width / 2
            height: root.height / 2
            indeterminate: true
        }

        Column {
            // 0〜100の範囲のプログレスバー定義
            ProgressBar {
                id: progressBar
                width: root.width / 2
                height: root.height /2
                from: 0
                to: 100
            }

            // プログレスバー更新開始用ボタン定義
            Button {
                id: button
                text: "Start"
                anchors.horizontalCenter: parent.horizontalCenter
                onClicked: { clickSound.play(); enabled = false; progressBar.value = 0; timer.start() }
            }
        }
    }
}

実行結果

※Linux Mint 18.2 & Qt 5.9.1使用