QML —— ProgressBar示例（附完整源码）

示例 - 效果

在这里插入图片描述

实例 - 源码

import QtQuick 2.12
import QtQuick.Window 2.12import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5Window
{id: rootIdvisible: truewidth: 640height: 480title: qsTr("Hello World")Column{spacing: 40anchors.centerIn: parentRow{spacing: 20Text{text: qsTr("ProgressBar类型1:")font.family: "微软雅黑"font.pixelSize: 18}ProgressBar{id: pb1value: 0.0anchors.verticalCenter: parent.verticalCenter}Text{text: qsTr("小球当前角度:")anchors.verticalCenter: parent.verticalCenter}Text{id: pb1Valuewidth: 80text: qsTr("--")anchors.verticalCenter: parent.verticalCenter}}Row{spacing: 20Text{text: qsTr("ProgressBar类型2:")font.family: "微软雅黑"font.pixelSize: 18}ProgressBar{id: pb2indeterminate: falseanchors.verticalCenter: parent.verticalCenter}Text{text: qsTr("小球当前角度:")anchors.verticalCenter: parent.verticalCenter}Text{id: pb2Valuewidth: 80text: qsTr("--")anchors.verticalCenter: parent.verticalCenter}}Timer{id: _timerinterval: 100repeat: truetriggeredOnStart: falserunning: falseonTriggered:{let rotationValue = imgId.rotation / 360pb1.value = rotationValueif(rotationValue === 1.0){running = falsepb2.indeterminate = falsepb2.value = rotationValue}else{pb2.indeterminate = true}pb1Value.text = pb2Value.text = Math.floor(imgId.rotation)}}Image{id: imgIdheight: 140width: 140source: "qrc:/ball.jpeg"anchors.horizontalCenter: parent.horizontalCenterNumberAnimation on rotation{id: imgAnimationIdfrom: 0to:360duration: 6000running: falseeasing.type: Easing.Linear}}Button{anchors.horizontalCenter: parent.horizontalCentertext: qsTr("开始(6秒转球360°)")onClicked:{let txt = text;if(txt.indexOf("开始") !== -1){_timer.start()imgAnimationId.start()text = qsTr("停止")}else{_timer.stop()imgAnimationId.stop()text = qsTr("开始(10秒转球360°)")}}}}
}