SliderStyle.qml 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  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 SliderStyle
  44. \inqmlmodule QtQuick.Controls.Styles
  45. \since 5.1
  46. \ingroup controlsstyling
  47. \brief Provides custom styling for Slider.
  48. The slider style allows you to create a custom appearance for
  49. a \l Slider control.
  50. The implicit size of the slider is calculated based on the
  51. maximum implicit size of the \c background and \c handle
  52. delegates combined.
  53. Example:
  54. \qml
  55. Slider {
  56. anchors.centerIn: parent
  57. style: SliderStyle {
  58. groove: Rectangle {
  59. implicitWidth: 200
  60. implicitHeight: 8
  61. color: "gray"
  62. radius: 8
  63. }
  64. handle: Rectangle {
  65. anchors.centerIn: parent
  66. color: control.pressed ? "white" : "lightgray"
  67. border.color: "gray"
  68. border.width: 2
  69. implicitWidth: 34
  70. implicitHeight: 34
  71. radius: 12
  72. }
  73. }
  74. }
  75. \endqml
  76. */
  77. Style {
  78. id: styleitem
  79. /*! The \l Slider this style is attached to. */
  80. readonly property Slider control: __control
  81. padding { top: 0 ; left: 0 ; right: 0 ; bottom: 0 }
  82. /*! This property holds the item for the slider handle.
  83. You can access the slider through the \c control property
  84. */
  85. property Component handle: Item{
  86. implicitWidth: implicitHeight
  87. implicitHeight: TextSingleton.implicitHeight * 1.2
  88. FastGlow {
  89. source: handle
  90. anchors.fill: parent
  91. anchors.bottomMargin: -1
  92. anchors.topMargin: 1
  93. smooth: true
  94. color: "#11000000"
  95. spread: 0.8
  96. transparentBorder: true
  97. blur: 0.1
  98. }
  99. Rectangle {
  100. id: handle
  101. anchors.fill: parent
  102. radius: width/2
  103. gradient: Gradient {
  104. GradientStop { color: control.pressed ? "#e0e0e0" : "#fff" ; position: 1 }
  105. GradientStop { color: "#eee" ; position: 0 }
  106. }
  107. Rectangle {
  108. anchors.fill: parent
  109. anchors.margins: 1
  110. radius: width/2
  111. border.color: "#99ffffff"
  112. color: control.activeFocus ? "#224f7fbf" : "transparent"
  113. }
  114. border.color: control.activeFocus ? "#47b" : "#777"
  115. }
  116. }
  117. /*! This property holds the background groove of the slider.
  118. You can access the handle position through the \c styleData.handlePosition property.
  119. */
  120. property Component groove: Item {
  121. property color fillColor: "#49d"
  122. anchors.verticalCenter: parent.verticalCenter
  123. implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
  124. implicitHeight: Math.max(6, Math.round(TextSingleton.implicitHeight * 0.3))
  125. Rectangle {
  126. radius: height/2
  127. anchors.fill: parent
  128. border.width: 1
  129. border.color: "#888"
  130. gradient: Gradient {
  131. GradientStop { color: "#bbb" ; position: 0 }
  132. GradientStop { color: "#ccc" ; position: 0.6 }
  133. GradientStop { color: "#ccc" ; position: 1 }
  134. }
  135. }
  136. Item {
  137. clip: true
  138. width: styleData.handlePosition
  139. height: parent.height
  140. Rectangle {
  141. anchors.fill: parent
  142. border.color: Qt.darker(fillColor, 1.2)
  143. radius: height/2
  144. gradient: Gradient {
  145. GradientStop {color: Qt.lighter(fillColor, 1.3) ; position: 0}
  146. GradientStop {color: fillColor ; position: 1.4}
  147. }
  148. }
  149. }
  150. }
  151. /*! This property holds the tick mark labels.
  152. \since QtQuick.Controls.Styles 1.1
  153. Every tickmark that should be drawn must be defined within this
  154. component, so it is common to use a \l Repeater, for example.
  155. You can access the handle width through the \c styleData.handleWidth property.
  156. */
  157. property Component tickmarks: Repeater {
  158. id: repeater
  159. model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
  160. Rectangle {
  161. color: "#777"
  162. width: 1 ; height: 3
  163. y: repeater.height
  164. x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
  165. }
  166. }
  167. /*! This property holds the slider style panel.
  168. Note that it is generally not recommended to override this.
  169. */
  170. property Component panel: Item {
  171. id: root
  172. property int handleWidth: handleLoader.width
  173. property int handleHeight: handleLoader.height
  174. property bool horizontal : control.orientation === Qt.Horizontal
  175. property int horizontalSize: grooveLoader.implicitWidth + padding.left + padding.right
  176. property int verticalSize: Math.max(handleLoader.implicitHeight, grooveLoader.implicitHeight) + padding.top + padding.bottom
  177. implicitWidth: horizontal ? horizontalSize : verticalSize
  178. implicitHeight: horizontal ? verticalSize : horizontalSize
  179. y: horizontal ? 0 : height
  180. rotation: horizontal ? 0 : -90
  181. transformOrigin: Item.TopLeft
  182. Item {
  183. anchors.fill: parent
  184. Loader {
  185. id: grooveLoader
  186. property QtObject styleData: QtObject {
  187. readonly property int handlePosition: handleLoader.x + handleLoader.width/2
  188. }
  189. x: padding.left
  190. sourceComponent: groove
  191. width: (horizontal ? parent.width : parent.height) - padding.left - padding.right
  192. y: Math.round(padding.top + (Math.round(horizontal ? parent.height : parent.width - padding.top - padding.bottom) - grooveLoader.item.height)/2)
  193. }
  194. Loader {
  195. id: tickMarkLoader
  196. anchors.fill: parent
  197. sourceComponent: control.tickmarksEnabled ? tickmarks : null
  198. property QtObject styleData: QtObject { readonly property int handleWidth: control.__panel.handleWidth }
  199. }
  200. Loader {
  201. id: handleLoader
  202. sourceComponent: handle
  203. anchors.verticalCenter: grooveLoader.verticalCenter
  204. x: Math.round((control.__handlePos - control.minimumValue) / (control.maximumValue - control.minimumValue) * ((horizontal ? root.width : root.height) - item.width))
  205. }
  206. }
  207. }
  208. }