QML学习

• BusyIndicator例程
• 视频讲解
• 代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")BusyIndicator {id: busyIndicatoranchors.fill: parentMouseArea {anchors.fill: parentonClicked: {busyIndicator.running = busyIndicator.running? false: true}}background: Rectangle {id: backgroundRectcolor: "transparent"}contentItem: Item {Rectangle {anchors.centerIn: parentwidth: parent.width < parent.height? parent.width / 4 * 3: parent.height / 4 * 3height: widthcolor: backgroundRect.colorradius: height / 2border.width: height / 12}Canvas {id: canvasanchors.centerIn: parentwidth: parent.width < parent.height? parent.width / 4 * 3: parent.height / 4 * 3height: widthproperty real angle: 0onPaint: {rotate()}function rotate() {var ctx = getContext('2d')ctx.clearRect(0, 0, canvas.width, canvas.height)ctx.beginPath()ctx.arc(width/2, height/2, height/2-height/12/2, canvas.angle, canvas.angle + Math.PI * 2 / 12, false)ctx.lineWidth = height / 12ctx.strokeStyle = "red"ctx.stroke()requestAnimationFrame(rotate)}Timer {repeat: trueinterval: 25onTriggered: {canvas.angle += Math.PI * 2 / 24}running: busyIndicator.running}}}}
}

演示

• 视频讲解