QML自定义滑动条Slider的样式

代码展示

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Slider {
          id: control
          value: 0.5

          background: Rectangle {
              x: control.leftPadding
              y: control.topPadding + control.availableHeight / 2 - height / 2
              implicitWidth: 200
              implicitHeight: 4
              width: control.availableWidth
              height: implicitHeight
              radius: 2
              color: "#bdbebf"

              Rectangle {
                  width: control.visualPosition * parent.width
                  height: parent.height
                  color: "#1a95f3"
                  radius: 2
              }
          }

          handle: Rectangle {
              x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
              y: control.topPadding + control.availableHeight / 2 - height / 2
              implicitWidth: 26
              implicitHeight: 26
              radius: 13
              color: control.pressed ? "#167dcb" : "#1a95f3"
              border.color: "#bdbebf"
          }
      }



}

运行效果展示

代码说明

这段QML代码定义了一个包含自定义滑动条（Slider）的窗口（Window）。下面是对关键代码部分的解释：

1. Slider:
   • id: control：为滑动条分配一个ID，以便在QML的其他部分引用它。
   • value: 0.5：设置滑动条的初始值。这个值介于0和1之间，表示滑动条当前位置相对于其总长度的比例。
2. background:
   • background属性定义了滑动条的背景。
   • 在这里，background是一个Rectangle，它作为滑动条的轨道。
   • implicitWidth: 200 和 implicitHeight: 4：设置背景矩形的隐式宽度和高度。隐式宽度是建议的宽度，而实际宽度可能会受到父元素布局的影响。隐式高度决定了轨道的厚度。
   • width: control.availableWidth：设置背景矩形的实际宽度为滑动条可用宽度。
   • height: implicitHeight：设置背景矩形的高度为其隐式高度。
   • radius: 2：设置背景矩形的圆角半径。
   • color: "#bdbebf"：设置背景矩形的颜色。
   • 内部的Rectangle表示滑动条当前值所对应的填充部分。它的宽度根据control.visualPosition（滑动条当前位置的比例）来计算，颜色为深蓝色（#1a95f3）。
3. handle:
   • handle属性定义了滑动条的手柄。
   • 在这里，handle也是一个Rectangle，用户可以通过拖动它来改变滑动条的值。
   • x属性根据control.visualPosition和手柄的宽度来计算手柄的位置，确保手柄始终位于滑动条当前值所对应的位置上。
   • implicitWidth: 26 和 implicitHeight: 26：设置手柄的隐式宽度和高度。
   • radius: 13：设置手柄的圆角半径。
   • color属性根据手柄是否被按下（control.pressed）来改变颜色。如果被按下，颜色变为稍暗的蓝色（#167dcb）；否则，保持为深蓝色（#1a95f3）。
   • border.color: "#bdbebf"：设置手柄边框的颜色，与背景颜色相同，以便在视觉上融合。

注意：

• 在这个QML代码中，滑动条的background和handle都是自定义的，这意味着它们不会继承Slider控件的默认样式。这种自定义方式提供了更大的灵活性，允许开发者根据需求调整控件的外观。
• 滑动条的value属性表示其当前值，可以通过绑定到其他QML属性或JavaScript函数来响应滑动条的变化。
• 滑动条的leftPadding、topPadding、availableWidth和availableHeight属性是由Slider控件内部计算的，用于确定控件的可用空间和内边距。这些属性在自定义background和handle时非常有用，因为它们允许开发者根据滑动条的实际布局来调整元素的位置和大小。