发帖 回复
返回列表
  • 3224阅读
  • 3回复

Qml组件化编程6-进度条定制 [复制链接]

 上一主题 下一主题
离线dd759378563
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2019-05-18

简介

本文是《Qml组件化编程》系列文章的第六篇，涛哥将教大家，进度条组件的定制。
顺便说一下，涛哥的TaoQuick项目正式开源了, 系列文章中的所有功能，包括动态换皮肤、切换多语言等等，都集成在了TaoQuick中，
同时涛哥也在TaoQuick中使用了持续集成(CI）技术，目前已经能够自动编译、发布Windows和 Macos平台的软件包，可以在github的Release界面下载体验。
互联网行业很流行的DevOps理念，在TaoQuick项目中得到了最佳的实践。
(linux平台的发布工具linuxdeployqt暂时还有点问题，涛哥后续会搞定的)
地址在这https://github.com/jaredtao/TaoQuick, 赶快去star吧。
注：文章主要发布在涛哥的博客 和 知乎专栏-涛哥的Qt进阶之路


先看预览图




新的渐变效果

Qt 5.12 加入了新的渐变效果，一共180种，效果来自这个网站https://webgradients.com
按照帮助文档的介绍，可以通过下面这两种方式使用
复制代码
  1. Rectangle {
  2.       y: 0; width: 80; height: 80
  3.       gradient: Gradient.NightFade
  4.   }
  6.   Rectangle {
  7.       y: 0; width: 80; height: 80
  8.       gradient: "NightFade"
  9.   }

  
涛哥立即想到了，枚举不就是数字嘛
复制代码
  1. Rectangle {
  2.       y: 0; width: 80; height: 80
  3.       gradient: 1
  4.   }
  5.   Rectangle {
  6.       y: 0; width: 80; height: 80
  7.       gradient: 2
  8.   }
  9.   Rectangle {
  10.       y: 0; width: 80; height: 80
  11.       gradient: 3
  12.   }



试了一下，这样也是可以啊，哈哈。
于是涛哥就把180种渐变效果都拉出来看看。

Qt只支持水平和垂直的渐变，其中有小部分是不能用的，所以只有165个能用。
看一下展示全部渐变的Qml代码：
复制代码
  1. import QtQuick 2.9
  2. import QtQuick.Controls 2.5
  4. Item {
  5.     anchors.fill: parent
  7.     GridView {
  8.         id: g
  9.         anchors.fill: parent
  10.         anchors.margins: 20
  11.         cellWidth: 160
  12.         cellHeight: 160
  13.         model: 180          //这里的数据Model直接给个数字180
  14.         clip: true
  15.         property var invalidList: [27, 39, 40, 45, 71, 74, 105, 111, 119, 130, 135, 141]    //这几个是不能用的，看过运行报错后手动列出来的。
  16.         delegate: Item{
  17.             width: 160
  18.             height: 160
  19.             Rectangle{
  20.                 width: 150
  21.                 height: 150
  22.                 anchors.centerIn: parent
  23.                 color: "white"
  24.                 radius: 10
  25.                 Text {
  26.                     anchors.horizontalCenter: parent.horizontalCenter
  27.                     anchors.top: parent.top
  28.                     anchors.topMargin: 2
  29.                     text: index + 1
  30.                 }
  31.                 Rectangle {
  32.                     width: 100
  33.                     height: width
  34.                     radius:  width / 2
  35.                     //编号在列表里的，直接渐变赋值为null，就不会在Qml运行时报警告了
  36.                     gradient: g.invalidList.indexOf(modelData + 1) < 0 ? modelData + 1 : null
  37.                     anchors.centerIn: parent
  38.                     anchors.verticalCenterOffset: 10
  39.                 }
  40.             }
  41.         }
  42.     }
  43. }




条形进度条

普通进度条的原理，就是有一个比较长的矩形做背景，在上面放一个颜色不同的矩形，其宽度跟着百分比变化,
100%时宽度与背景一致。
可以写一个很简要的进度条。
复制代码
  1. Rectangle {
  2.     id: back
  3.     width: 300
  4.     height: 50
  5.     radius: height / 2
  6.     color: "white"  
  7.     property int percent: 0
  8.     Rectangle {
  9.         id: front
  10.         //宽度是 背景宽度 * 百分比
  11.         width: percent / 100 * parent.width  
  12.         height: parent.height
  13.         radius: parent.radius
  14.         color: "red"
  15.     }
  16. }



再添加一点元素，在右侧放一个文本，表示百分比，或者放图片。甚至给进度条加个闪光特效。
经过一系列的加工，封装成一个综合的组件，最终结果如下：
复制代码
  1. //NormalProgressBar.qml
  3. import QtQuick 2.12
  4. import QtQuick.Controls 2.12
  5. Item {
  6.     id: r
  7.     property int percent: 0
  8.     implicitWidth: 200
  9.     implicitHeight: 16
  10.     //枚举， 表示右侧Bar的类型
  11.     enum BarType {  
  12.         Text,               //右侧放文本
  13.         SucceedOrFailed,    //右侧放图片表示成功和失败，没有100%就是失败
  14.         NoBar               //右侧不放东西
  15.     }
  16.     //只读属性，内置一些颜色
  17.     readonly property color __backColor: "#f5f5f5"
  18.     readonly property color __blueColor: "#1890ff"
  19.     readonly property color __succeedColor: "#52c41a"
  20.     readonly property color __failedColor: "#f5222d"
  22.     //背景色，默认值
  23.     property color backgroundColor: __backColor
  24.     //前景色
  25.     property color frontColor: {
  26.         switch (barType) {
  27.         case TNormalProgress.BarType.SucceedOrFailed:
  28.             return percent === 100 ? __succeedColor : __failedColor
  29.         default:
  30.             return __blueColor
  31.         }
  32.     }
  33.     //文字
  34.     property string text: String("%1%").arg(percent)
  35.     //渐变 0-180 除掉不能用的，165种渐变任你选
  36.     property int gradientIndex: -1
  37.     //闪烁特效
  38.     property bool flicker: false
  39.     //右侧Bar类型
  40.     property var barType: TNormalProgress.BarType.Text
  41.     Text {
  42.         id: t
  43.         enabled: barType === TNormalProgress.BarType.Text
  44.         visible: enabled
  45.         text: r.text
  46.         anchors.verticalCenter: parent.verticalCenter
  47.         anchors.right: parent.right
  48.     }
  49.     Image {
  50.         id: image
  51.         source: percent === 100 ? "qrc:/Core/Image/ProgressBar/ok_circle.png" : "qrc:/Core/Image/ProgressBar/fail_circle.png"
  52.         height: parent.height
  53.         width: height
  54.         enabled: barType === TNormalProgress.BarType.SucceedOrFailed
  55.         visible: enabled
  56.         anchors.right: parent.right
  57.     }
  59.     property var __right: {
  60.         switch (barType) {
  61.         case TNormalProgress.BarType.Text:
  62.             return t.left
  63.         case TNormalProgress.BarType.SucceedOrFailed:
  64.             return image.left
  65.         default:
  66.             return r.right
  67.         }
  68.     }
  69.     Rectangle {                             //背景
  70.         id: back
  71.         anchors.left: parent.left
  72.         anchors.right: __right
  73.         anchors.rightMargin: 4
  74.         height: parent.height
  75.         radius: height / 2
  76.         color: backgroundColor
  77.         Rectangle {                         //前景
  78.             id: front
  79.             width: percent / 100 * parent.width
  80.             height: parent.height
  81.             radius: parent.radius
  82.             color: frontColor
  83.             gradient: gradientIndex === -1 ? null : gradientIndex
  84.             Rectangle {                     //前景上的闪光特效
  85.                 id: flick
  86.                 height: parent.height
  87.                 width: 0
  88.                 radius: parent.radius
  89.                 color: Qt.lighter(parent.color, 1.2)
  90.                 enabled: flicker
  91.                 visible: enabled
  92.                 NumberAnimation on width {
  93.                     running: visible
  94.                     from: 0
  95.                     to: front.width
  96.                     duration: 1000
  97.                     loops: Animation.Infinite;
  98.                 }
  99.             }
  100.         }
  101.     }
  102. }



圆形进度条

将一个Rectangle做成圆形: 宽高相等，半径为宽度一半。
再把 颜色设置为透明，边框不透明，边框加粗一点，就是一个圆环了。
复制代码
  1. Rectangle {
  2.     id: back
  3.     width: 120
  4.     height: width
  5.     radius: width / 2
  6.     color: "transparent"
  7.     border.width: 10
  8.     border.color: "white"
  9. }



接下来给圆环贴上一个圆形渐变色，渐变按照百分比来做。
复制代码
  1. import QtGraphicalEffects 1.12
  2. Rectangle {
  3.     id: back
  4.     width: 120
  5.     height: width
  6.     radius: width / 2
  7.     color: "transparent"
  8.     border.width: 10
  9.     border.color: "white"
  10.     property int percent: 0
  11.     ConicalGradient {
  12.         anchors.fill: back
  13.         source: back
  14.         gradient: Gradient {
  15.             GradientStop { position: 0.0; color: "white" }
  16.             GradientStop { position: percent / 100 ; color: "red" }
  17.             GradientStop { position: percent / 100 + 0.001; color: "white" }
  18.             GradientStop { position: 1.0; color: "white" }
  19.         }
  20.     }
  21. }



渐变从0 到 percent处都是有渐变颜色的, 再从percent + 0.001 到1.0处，都是背景色，这样就是一个简易的圆形进度条了。
不过这里percent为100的情况，圆形渐变处理不了，我们可以特殊处理，直接让背景圆环变成前景色就行了。(既然都100%了，背景肯定是全部被遮住了，那就让背景做前景，藏掉真正的前景)
复制代码
  1. import QtGraphicalEffects 1.12
  2. Rectangle {
  3.     id: back
  4.     width: 120
  5.     height: width
  6.     radius: width / 2
  7.     color: "transparent"
  8.     border.width: 10
  9.     border.color: percent === 100 ? "red" : "white"     //百分比为100时显示为前景,否则显示为背景
  10.     property int percent: 0
  11.     ConicalGradient {
  12.         anchors.fill: back
  13.         source: back
  14.         enabled: percent != 100     //百分比不为100时有效
  15.         visible: enabled            //百分比不为100时有效
  16.         gradient: Gradient {
  17.             GradientStop { position: 0.0; color: "white" }
  18.             GradientStop { position: percent / 100 ; color: "red" }
  19.             GradientStop { position: percent / 100 + 0.001; color: "white" }
  20.             GradientStop { position: 1.0; color: "white" }
  21.         }
  22.     }
  23. }



再加点料,封装成组件
复制代码
  1. //CircleProgressBar.qml
  2. import QtQuick 2.12
  3. import QtQuick.Controls 2.12
  4. import QtGraphicalEffects 1.12
  5. Item {
  6.     id: r
  7.     property int percent: 0
  9.     enum BarType {
  10.         Text,
  11.         SucceedOrFailed,
  12.         NoBar
  13.     }
  14.     readonly property color __backColor: "#f5f5f5"
  15.     readonly property color __blueColor: "#1890ff"
  16.     readonly property color __succeedColor: "#52c41a"
  17.     readonly property color __failedColor: "#f5222d"
  18.     property color backgroundColor: __backColor
  19.     property color frontColor: {
  20.         switch (barType) {
  21.         case TNormalProgress.BarType.SucceedOrFailed:
  22.             return percent === 100 ? __succeedColor : __failedColor
  23.         default:
  24.             return __blueColor
  25.         }
  26.     }
  27.     property string text: String("%1%").arg(percent)
  28.     property var barType: TNormalProgress.BarType.Text
  29.     Rectangle {
  30.         id: back
  31.         color: "transparent"
  32.         anchors.fill: parent
  33.         border.color: percent === 100 ? frontColor : backgroundColor
  34.         border.width: 10
  35.         radius: width / 2
  36.     }
  37.     Text {
  38.         id: t
  39.         enabled: barType === TNormalProgress.BarType.Text
  40.         visible: enabled
  41.         text: r.text
  42.         anchors.centerIn: parent
  43.         verticalAlignment: Text.AlignVCenter
  44.         horizontalAlignment: Text.AlignHCenter
  45.     }
  46.     Image {
  47.         id: image
  48.         source: percent === 100 ? "qrc:/Core/Image/ProgressBar/ok.png" : "qrc:/Core/Image/ProgressBar/fail.png"
  49.         enabled: barType === TNormalProgress.BarType.SucceedOrFailed
  50.         visible: enabled
  51.         scale: 2
  52.         anchors.centerIn: parent
  53.     }
  54.     ConicalGradient {
  55.         anchors.fill: back
  56.         source: back
  57.         enabled: percent != 100
  58.         visible: enabled
  59.         smooth: true
  60.         antialiasing: true
  61.         gradient: Gradient {
  62.             GradientStop { position: 0.0; color: frontColor }
  63.             GradientStop { position: percent / 100 ; color: frontColor }
  64.             GradientStop { position: percent / 100 + 0.001; color: backgroundColor }
  65.             GradientStop { position: 1.0; color: backgroundColor }
  66.         }
  67.     }
  68. }


最后来个合影


复制代码
  1. Item {
  2.     id: r
  3.     anchors.fill: parent
  4.     Grid {
  5.         id: g
  6.         anchors.fill: parent
  7.         anchors.margins: 10
  8.         columns: 2
  9.         spacing: 10
  10.         Column {
  11.             width: g.width / 2 - 10
  12.             height: g.height /2 - 10
  13.             spacing: 10
  14.             TNormalProgress {
  15.                 width: parent.width
  16.                 backgroundColor: gConfig.reserverColor
  17.                 NumberAnimation on percent { from: 0; to: 100; duration: 5000; running: true; loops: Animation.Infinite}
  18.             }
  19.             TNormalProgress {
  20.                 width: parent.width
  21.                 backgroundColor: gConfig.reserverColor
  22.                 flicker: true
  23.                 percent: 50
  24.             }
  25.             TNormalProgress {
  26.                 width: parent.width
  27.                 backgroundColor: gConfig.reserverColor
  28.                 barType: TNormalProgress.BarType.SucceedOrFailed
  29.                 percent: 70
  30.             }
  31.             TNormalProgress {
  32.                 width: parent.width
  33.                 backgroundColor: gConfig.reserverColor
  34.                 barType: TNormalProgress.BarType.SucceedOrFailed
  35.                 percent: 100
  36.             }
  37.             TNormalProgress {
  38.                 width: parent.width
  39.                 backgroundColor: gConfig.reserverColor
  40.                 barType: TNormalProgress.BarType.NoBar
  41.                 percent: 50
  42.                 gradientIndex: 12
  43.             }
  44.         }
  45.         Row {
  46.             width: g.width / 2 - 10
  47.             height: g.height /2 - 10
  48.             spacing: 10
  50.             TCircleProgress {
  51.                 width: 120
  52.                 height: 120
  53.                 backgroundColor: gConfig.reserverColor
  54.                 NumberAnimation on percent { from: 0; to: 100; duration: 5000; running: true; loops: Animation.Infinite}
  55.             }
  56.             TCircleProgress {
  57.                 width: 120
  58.                 height: 120
  59.                 backgroundColor: gConfig.reserverColor
  60.                 barType: TNormalProgress.BarType.SucceedOrFailed
  61.                 percent: 75
  62.             }
  63.             TCircleProgress {
  64.                 width: 120
  65.                 height: 120
  66.                 backgroundColor: gConfig.reserverColor
  67.                 barType: TNormalProgress.BarType.SucceedOrFailed
  68.                 percent: 100
  69.             }
  70.         }
  71.         Row {
  72.             width: g.width / 2 - 10
  73.             height: g.height /2 - 10
  74.             spacing: 10
  76.             TCircleProgress {
  77.                 width: 120
  78.                 height: 120
  79.                 backgroundColor: gConfig.reserverColor
  80.                 text: String("%1天").arg(percent)
  81.                 NumberAnimation on percent { from: 0; to: 100; duration: 5000; running: true; loops: Animation.Infinite}
  82.             }
  83.             TCircleProgress {
  84.                 id: ppppp
  85.                 width: 120
  86.                 height: 120
  87.                 backgroundColor: gConfig.reserverColor
  88.                 barType: TNormalProgress.BarType.SucceedOrFailed
  89.                 SequentialAnimation {
  90.                     running: true
  91.                     loops: Animation.Infinite
  92.                     NumberAnimation {
  93.                         target: ppppp
  94.                         property: "percent"
  95.                         from: 0
  96.                         to: 100
  97.                         duration: 3000
  98.                     }
  99.                     PauseAnimation {
  100.                         duration: 500
  101.                     }
  102.                 }
  103.             }
  104.             TCircleProgress {
  105.                 width: 120
  106.                 height: 120
  107.                 backgroundColor: gConfig.reserverColor
  108.                 percent: 100
  109.             }
  110.         }
  111.     }
  112. }
涛哥是个Qml高手，著有《Qml组件化编程》《Qml特效》系列教程，见知乎专栏-Qt进阶之路：https://zhuanlan.zhihu.com/TaoQt
或微信公众号：Qt进阶之路
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线dd759378563
新手上路
只看该作者 1楼 发表于: 2019-05-18
代码格式已经修复
涛哥是个Qml高手，著有《Qml组件化编程》《Qml特效》系列教程，见知乎专栏-Qt进阶之路：https://zhuanlan.zhihu.com/TaoQt
或微信公众号：Qt进阶之路
回复
举报
在线liudianwu
总版主
只看该作者 2楼 发表于: 2019-05-18
qml效果真是炫
欢迎关注微信公众号：Qt实战/Qt入门和进阶(各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发) QQ：517216493  WX：feiyangqingyun  QQ群：751439350
回复
举报
离线big_mouse
禁止发言
只看该作者 3楼 发表于: 2020-04-15
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个