ProgressBarStyle.qml 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. /****************************************************************************
  2. **
  3. ** Copyright (C) 2016 The Qt Company Ltd.
  4. ** Contact: https://www.qt.io/licensing/
  5. **
  6. ** This file is part of the Qt Quick Controls module of the Qt Toolkit.
  7. **
  8. ** $QT_BEGIN_LICENSE:LGPL$
  9. ** Commercial License Usage
  10. ** Licensees holding valid commercial Qt licenses may use this file in
  11. ** accordance with the commercial license agreement provided with the
  12. ** Software or, alternatively, in accordance with the terms contained in
  13. ** a written agreement between you and The Qt Company. For licensing terms
  14. ** and conditions see https://www.qt.io/terms-conditions. For further
  15. ** information use the contact form at https://www.qt.io/contact-us.
  16. **
  17. ** GNU Lesser General Public License Usage
  18. ** Alternatively, this file may be used under the terms of the GNU Lesser
  19. ** General Public License version 3 as published by the Free Software
  20. ** Foundation and appearing in the file LICENSE.LGPL3 included in the
  21. ** packaging of this file. Please review the following information to
  22. ** ensure the GNU Lesser General Public License version 3 requirements
  23. ** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
  24. **
  25. ** GNU General Public License Usage
  26. ** Alternatively, this file may be used under the terms of the GNU
  27. ** General Public License version 2.0 or (at your option) the GNU General
  28. ** Public license version 3 or any later version approved by the KDE Free
  29. ** Qt Foundation. The licenses are as published by the Free Software
  30. ** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
  31. ** included in the packaging of this file. Please review the following
  32. ** information to ensure the GNU General Public License requirements will
  33. ** be met: https://www.gnu.org/licenses/gpl-2.0.html and
  34. ** https://www.gnu.org/licenses/gpl-3.0.html.
  35. **
  36. ** $QT_END_LICENSE$
  37. **
  38. ****************************************************************************/
  39. import QtQuick 2.2
  40. import QtQuick.Controls 1.2
  41. import QtQuick.Controls.Private 1.0
  42. /*!
  43. \qmltype ProgressBarStyle
  44. \inqmlmodule QtQuick.Controls.Styles
  45. \since 5.1
  46. \ingroup controlsstyling
  47. \brief Provides custom styling for ProgressBar.
  48. Example:
  49. \qml
  50. ProgressBar {
  51. value: slider.value
  52. style: ProgressBarStyle {
  53. background: Rectangle {
  54. radius: 2
  55. color: "lightgray"
  56. border.color: "gray"
  57. border.width: 1
  58. implicitWidth: 200
  59. implicitHeight: 24
  60. }
  61. progress: Rectangle {
  62. color: "lightsteelblue"
  63. border.color: "steelblue"
  64. }
  65. }
  66. }
  67. \endqml
  68. Note that the example above is somewhat simplified and will not animate
  69. an indeterminate progress bar. The following snippet demonstrates
  70. how you can incorporate a custom animation for the indeterminate
  71. state as well.
  72. \code
  73. progress: Rectangle {
  74. border.color: "steelblue"
  75. color: "lightsteelblue"
  76. // Indeterminate animation by animating alternating stripes:
  77. Item {
  78. anchors.fill: parent
  79. anchors.margins: 1
  80. visible: control.indeterminate
  81. clip: true
  82. Row {
  83. Repeater {
  84. Rectangle {
  85. color: index % 2 ? "steelblue" : "lightsteelblue"
  86. width: 20 ; height: control.height
  87. }
  88. model: control.width / 20 + 2
  89. }
  90. XAnimator on x {
  91. from: 0 ; to: -40
  92. loops: Animation.Infinite
  93. running: control.indeterminate
  94. }
  95. }
  96. }
  97. }
  98. \endcode
  99. */
  100. Style {
  101. id: progressBarStyle
  102. /*! The \l ProgressBar this style is attached to. */
  103. readonly property ProgressBar control: __control
  104. /*! A value in the range [0-1] indicating the current progress. */
  105. readonly property real currentProgress: control.indeterminate ? 1.0 :
  106. control.value / control.maximumValue
  107. /*! This property holds the visible contents of the progress bar
  108. You can access the Slider through the \c control property.
  109. For convenience, you can also access the readonly property \c styleData.progress
  110. which provides the current progress as a \c real in the range [0-1]
  111. */
  112. padding { top: 0 ; left: 0 ; right: 0 ; bottom: 0 }
  113. /*! \qmlproperty Component ProgressBarStyle::progress
  114. The progress component for this style.
  115. */
  116. property Component progress: Item {
  117. property color progressColor: "#49d"
  118. anchors.fill: parent
  119. clip: true
  120. Rectangle {
  121. id: base
  122. anchors.fill: parent
  123. radius: TextSingleton.implicitHeight * 0.16
  124. antialiasing: true
  125. gradient: Gradient {
  126. GradientStop {color: Qt.lighter(progressColor, 1.3) ; position: 0}
  127. GradientStop {color: progressColor ; position: 1.4}
  128. }
  129. border.width: 1
  130. border.color: Qt.darker(progressColor, 1.2)
  131. Rectangle {
  132. color: "transparent"
  133. radius: 1.5
  134. clip: true
  135. antialiasing: true
  136. anchors.fill: parent
  137. anchors.margins: 1
  138. border.color: Qt.rgba(1,1,1,0.1)
  139. Image {
  140. visible: control.indeterminate
  141. height: parent.height
  142. NumberAnimation on x {
  143. from: -39
  144. to: 0
  145. running: control.indeterminate
  146. duration: 800
  147. loops: Animation.Infinite
  148. }
  149. fillMode: Image.Tile
  150. width: parent.width + 25
  151. source: "images/progress-indeterminate.png"
  152. }
  153. }
  154. }
  155. Rectangle {
  156. height: parent.height - 2
  157. width: 1
  158. y: 1
  159. anchors.right: parent.right
  160. anchors.rightMargin: 1
  161. color: Qt.rgba(1,1,1,0.1)
  162. visible: splitter.visible
  163. }
  164. Rectangle {
  165. id: splitter
  166. height: parent.height - 2
  167. width: 1
  168. y: 1
  169. anchors.right: parent.right
  170. color: Qt.darker(progressColor, 1.2)
  171. property int offset: currentProgress * control.width
  172. visible: offset > base.radius && offset < control.width - base.radius + 1
  173. }
  174. }
  175. /*! \qmlproperty Component ProgressBarStyle::background
  176. The background component for this style.
  177. \note The implicitWidth and implicitHeight of the background component
  178. must be set.
  179. */
  180. property Component background: Item {
  181. implicitWidth: 200
  182. implicitHeight: Math.max(17, Math.round(TextSingleton.implicitHeight * 0.7))
  183. Rectangle {
  184. anchors.fill: parent
  185. anchors.bottomMargin: control.pressed ? 0 : -1
  186. color: "#44ffffff"
  187. radius: baserect.radius
  188. }
  189. Rectangle {
  190. id: baserect
  191. gradient: Gradient {
  192. GradientStop {color: "#eee" ; position: 0}
  193. GradientStop {color: "#fff" ; position: 0.1}
  194. GradientStop {color: "#fff" ; position: 1}
  195. }
  196. radius: TextSingleton.implicitHeight * 0.16
  197. anchors.fill: parent
  198. border.color: control.activeFocus ? "#47b" : "#999"
  199. Rectangle {
  200. anchors.fill: parent
  201. radius: parent.radius
  202. color: control.activeFocus ? "#47b" : "white"
  203. opacity: control.hovered || control.activeFocus ? 0.1 : 0
  204. Behavior on opacity {NumberAnimation{ duration: 100 }}
  205. }
  206. }
  207. }
  208. /*! \qmlproperty Component ProgressBarStyle::panel
  209. The panel component for this style.
  210. */
  211. property Component panel: Item{
  212. property bool horizontal: control.orientation == Qt.Horizontal
  213. implicitWidth: horizontal ? backgroundLoader.implicitWidth : backgroundLoader.implicitHeight
  214. implicitHeight: horizontal ? backgroundLoader.implicitHeight : backgroundLoader.implicitWidth
  215. Item {
  216. width: horizontal ? parent.width : parent.height
  217. height: !horizontal ? parent.width : parent.height
  218. y: horizontal ? 0 : width
  219. rotation: horizontal ? 0 : -90
  220. transformOrigin: Item.TopLeft
  221. Loader {
  222. id: backgroundLoader
  223. anchors.fill: parent
  224. sourceComponent: background
  225. }
  226. Loader {
  227. sourceComponent: progressBarStyle.progress
  228. anchors.topMargin: padding.top
  229. anchors.leftMargin: padding.left
  230. anchors.rightMargin: padding.right
  231. anchors.bottomMargin: padding.bottom
  232. anchors.top: parent.top
  233. anchors.left: parent.left
  234. anchors.bottom: parent.bottom
  235. width: currentProgress * (parent.width - padding.left - padding.right)
  236. }
  237. }
  238. }
  239. }