运用QML制作圆形进度条效果

4550阅读　0评论2017-03-06　owen0725
分类：其他平台

原文：http://blog.csdn.net/shado_walker/article/details/51684865

在QML中原声的进度条为水平或垂直的直线型进度条，可以用ProgressBar配合style: ProgressBarStyle{}进行实现，代码如下：

点击(此处)折叠或打开

  1. import QtQuick 2.4
  2. import QtQuick.Controls 1.3
  3. import QtQuick.Controls.Styles 1.2
  4. import QtGraphicalEffects 1.0
  5. import QtQml 2.2

  7. Rectangle {
  8.     id:root;
  9.     color: "white";
  10.     visible: true;
  11.     width: 600;
  12.     height: 600;

  14.     Timer{
  15.         interval: 300;
  16.         running: true;
  17.         repeat: true;
  18.         onTriggered: {
  19.             if(progressBar3.value >= 1)
  20.                 progressBar3.value = 0;
  21.             progressBar3.value += 0.05;

  23.             if(progressBar4.value >= 1)
  24.                 progressBar4.value = 0;
  25.             progressBar4.value += 0.05;
  26.         }

  28.     }

  30.     ProgressBar {
  31.         id: progressBar3
  32.         x: 83
  33.         y: 226
  34.         width: 397
  35.         height: 23
  36.         value: 0.01;
  37.         style: ProgressBarStyle{
  38.             id:progressBar3Style;
  39.             background: Rectangle{
  40.                 border.width: 1;
  41.                 border.color: control.hovered?"green":"#25b1e8";
  42.                 color:"lightgray";
  43.                 Text {
  44.                     anchors.right: parent.right;
  45.                     anchors.rightMargin: 5;
  46.                     anchors.verticalCenter: parent.verticalCenter;
  47.                     text: Math.round(currentProgress*100) + "%";
  48.                     color: "#25b1e8"
  49.                 }
  50.             }

  52.             progress: Rectangle{
  53.                 color: "#25b1e8";//
  54.                 clip: true;
  55.                 Rectangle{
  56.                     anchors.left: parent.left;
  57.                     //anchors.top: parent.top;
  58.                     //anchors.bottom: parent.bottom;
  59.                     height: progressBar3.width;
  60.                     width: progressBar3.width;
  61.                     LinearGradient{
  62.                         anchors.fill: parent;
  63.                         gradient: Gradient {
  64.                             GradientStop {
  65.                                 position: 0.00;
  66.                                 color: "#ffffff";
  67.                             }
  68.                             GradientStop {
  69.                                 position: 1.00;
  70.                                 color: "#36d1e8";
  71.                             }
  72.                         }
  73.                         start:Qt.point(0, 0);
  74.                         end: Qt.point(parent.width, 0);
  75.                     }
  76.                 }
  77.             }

  79.             panel: Item{
  80.                 implicitHeight: 20;
  81.                 implicitWidth: 200;

  83.                 Loader{
  84.                     anchors.fill: parent;
  85.                     sourceComponent: background;
  86.                 }

  88.                 Loader{
  89.                     anchors.top: parent.top;
  90.                     anchors.left: parent.left;
  91.                     anchors.bottom: parent.bottom;
  92.                     anchors.margins: 2;
  93.                     width: currentProgress * (parent.width - 4)
  94.                     sourceComponent: progressBar3Style.progress;
  95.                 }
  96.             }
  97.         }

  99.     }

  101.     ProgressBar {
  102.         id: progressBar4
  103.         x: 83
  104.         y: 289
  105.         width: 397
  106.         height: 23
  107.         value: 0.01;

  109.         property color colorValue: Qt.rgba(37/255, 177/255, 232/255, 1);

  111.         style: ProgressBarStyle{
  112.             id:progressBar4Style;
  113.             background: Rectangle{
  114.                 border.width: 1;
  115.                 border.color: control.hovered?"green":"#25b1e8";
  116.                 color:"lightgray";
  117.             }

  119.             progress: Rectangle{
  120.                 //color: "#25b1e8";//
  121.                 //color: Math.round(currentProgress*100);
  122.                 color: progressBar4.colorValue;
  123.                 onColorChanged: {
  124.                     console.log("onColorChanged")
  125.                 }
  126.             }

  128.             panel: Item{
  129.                 implicitHeight: 20;
  130.                 implicitWidth: 200;

  132.                 Loader{
  133.                     anchors.fill: parent;
  134.                     sourceComponent: background;
  135.                 }

  137.                 Loader{
  138.                     anchors.top: parent.top;
  139.                     anchors.left: parent.left;
  140.                     anchors.bottom: parent.bottom;
  141.                     anchors.margins: 2;
  142.                     width: currentProgress * (parent.width - 4)
  143.                     sourceComponent: progressBar4Style.progress;

  145.                     onWidthChanged: {
  146.                         console.log("onWidthChanged")
  147.                         progressBar4.colorValue = Qt.rgba(1-currentProgress, 1-currentProgress, 1-currentProgress, 1)
  148.                     }
  149.                 }

  151.                 Text {
  152.                     anchors.right: parent.right;
  153.                     anchors.rightMargin: 5;
  154.                     anchors.verticalCenter: parent.verticalCenter;
  155.                     text: Math.round(currentProgress*100) + "%";
  156.                     color: "#25b1e8"
  157.                 }
  158.             }
  159.         }
  160.     }

  162. }
效果如下：


圆形进度条的实现代码如下：


点击(此处)折叠或打开

  1. import QtQuick 2.5
  2. import QtQuick.Layouts 1.2
  3. import QtQuick.Controls 1.4
  4. import QtQuick.Controls.Styles 1.4
  5. import Material 0.1 as Material
  6. import QtQuick.Controls.Styles.Material 0.1 as MaterialStyle

  8. // draws two arcs (portion of a circle)
  9. // fills the circle with a lighter secondary color
  10. // when pressed

  12. Canvas {
  13.     id: canvas
  14.     width: 60
  15.     height: 60
  16.     antialiasing: true

  18.     property color primaryColor: "orange"
  19.     property color secondaryColor: "lightblue"

  21.     property real centerWidth: width / 2
  22.     property real centerHeight: height / 2
  23.     //property real radius: Math.min(canvas.width, canvas.height) / 2
  24.     property real radius: Math.min(canvas.width-10, canvas.height-10) / 2

  26.     property real minimumValue: 0
  27.     property real maximumValue: 100
  28.     property real currentValue: 0

  30.     // this is the angle that splits the circle in two arcs
  31.     // first arc is drawn from 0 radians to angle radians
  32.     // second arc is angle radians to 2*PI radians
  33.     property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Math.PI

  35.     // we want both circle to start / end at 12 o'clock
  36.     // without this offset we would start / end at 9 o'clock
  37.     property real angleOffset: -Math.PI / 2

  39.     signal clicked()

  41.     onPrimaryColorChanged: requestPaint()
  42.     onSecondaryColorChanged: requestPaint()
  43.     onMinimumValueChanged: requestPaint()
  44.     onMaximumValueChanged: requestPaint()
  45.     onCurrentValueChanged: requestPaint()

  47.     onPaint: {
  48.         var ctx = getContext("2d");
  49.         ctx.save();

  51.         ctx.clearRect(0, 0, canvas.width, canvas.height);

  53.         // fills the mouse area when pressed
  54.         // the fill color is a lighter version of the
  55.         // secondary color

  57.         if (mouseArea.pressed) {
  58.             ctx.beginPath();
  59.             ctx.lineWidth = 10;
  60.             ctx.fillStyle = Qt.lighter(canvas.secondaryColor, 1.25);
  61.             ctx.arc(canvas.centerWidth,
  62.                     canvas.centerHeight,
  63.                     canvas.radius,
  64.                     0,
  65.                     2*Math.PI);
  66.             ctx.fill();

  68.             timer.running = true;
  69.         }

  71.         // First, thinner arc
  72.         // From angle to 2*PI

  74.         ctx.beginPath();
  75.         ctx.lineWidth = 10;
  76.         ctx.strokeStyle = primaryColor;
  77.         ctx.arc(canvas.centerWidth,
  78.                 canvas.centerHeight,
  79.                 canvas.radius,
  80.                 angleOffset + canvas.angle,
  81.                 angleOffset + 2*Math.PI);
  82.         ctx.stroke();


  85.         // Second, thicker arc
  86.         // From 0 to angle

  88.         ctx.beginPath();
  89.         ctx.lineWidth = 10;
  90.         ctx.strokeStyle = canvas.secondaryColor;
  91.         ctx.arc(canvas.centerWidth,
  92.                 canvas.centerHeight,
  93.                 canvas.radius,
  94.                 canvas.angleOffset,
  95.                 canvas.angleOffset + canvas.angle);
  96.         ctx.stroke();

  98.         ctx.restore();
  99.     }

  101.     Text {
  102.         id: txt_progress
  103.         anchors.centerIn: parent

  105.         font.pixelSize: 16
  106.         text: canvas.text
  107.         color: canvas.primaryColor
  108.     }

  110.     MouseArea {
  111.         id: mouseArea

  113.         anchors.fill: parent
  114.         onClicked: canvas.clicked()
  115.         onPressedChanged: canvas.requestPaint()
  116.     }


  119.     Timer{
  120.         id: timer
  121.         interval: 300;
  122.         running: false;
  123.         repeat: true;
  124.         onTriggered: {
  125.             if(currentValue === 100) {
  126.                 currentValue = 0;
  127.                 txt_progress.text = "0"
  128.             }
  129.             currentValue += 1;
  130.             txt_progress.text = currentValue.toString()+"%";
  131.         }

  133.     }
  134. }

实现效果如下：


更改以上代码中的弧线宽度和半径长度，可以实现扇形进度（弧线变粗到半径，半径变短到0），实现效果如下：



上一篇：qml demo分析(clocks-时钟)
下一篇：Qt QML—QML signal与signal handler系统