Qt Quick入門教程(10) : QML圓形延時按鈕

      QML提供了延時按鈕DelayButton，咱們能夠對其自定義，以下圖：

       代碼

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("圓形延時按鈕")

    DelayButton {
          id: control
          checked: true
          text: qsTr("延時動做")
          x:30
          y:30

          //延時時間設置，5秒。默認得是3秒
          delay:5000

          contentItem: Text {
              text: control.text
              font: control.font
              opacity: enabled ? 1.0 : 0.3
              color: "white"
              horizontalAlignment: Text.AlignHCenter
              verticalAlignment: Text.AlignVCenter
              elide: Text.ElideRight
          }

          background: Rectangle {
              implicitWidth: 100
              implicitHeight: 100
              opacity: enabled ? 1 : 0.3
              color: control.down ? "#17a81a" : "#21be2b"
              radius: size / 2

              readonly property real size: Math.min(control.width, control.height)
              width: size
              height: size
              anchors.centerIn: parent

              Canvas {
                  id: canvas
                  anchors.fill: parent

                  Connections {
                      target: control
                      onProgressChanged: canvas.requestPaint()
                  }

                  onPaint: {
                      var ctx = getContext("2d")
                      ctx.clearRect(0, 0, width, height)
                      ctx.strokeStyle = "white"
                      ctx.lineWidth = parent.size / 20
                      ctx.beginPath()
                      var startAngle = Math.PI / 5 * 3
                      var endAngle = startAngle + control.progress * Math.PI / 5 * 9
                      ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
                      ctx.stroke()
                  }
              }
          }

          //延時結束時的信號槽
          onActivated: {
              //5秒後才能打印這句話
              console.log("延時結束了")
          }
      }
}