Qt Quick - Slider

一、概述

Slider 其实就是一个滚动条控件，用来选择一个值，表现的形式就是在一个轨道上通过一个滑块来改变的。一般就是在音量设置之类的使用。

使用这个就很好绑定的

ColumnLayout{
    
    
        anchors.fill: parent;

        RowLayout{
    
    
            Label{
    
    
                text: "音量值："
            }
            Label{
    
    
                id: musicLoud
                text: "0"
            }
            Layout.alignment: Qt.AlignHCenter
        }

        Slider{
    
    
            from: 1
            value: 20
            to: 100
            stepSize:1

            Layout.alignment: Qt.AlignHCenter
            onMoved: {
    
    
                musicLoud.text = value/1;
            }
        }
}

二、使用介绍

一般就是通过设置自定义的from、value和 to 值:
简单的例子如下：

  Slider {
    
    
      from: 1
      value: 25
      to: 100
  }

Slider 有一个属性是 position属性表示为控件大小的一个小数，也就是控件的逻辑值，会被映射到0-1区间内。取值范围为0.0 ~ 1.0。visualPosition属性和上面一样，如果在从右到左的使用中是要颠倒过来的。

当设置滑块样式时，visualPosition用于定位手柄。在上面的例子中，在从左到右的应用中，visualPosition的值为0.24，而在从右到左的应用中，visualPosition的值为0.76。

三、定制化样式

Slider 就需要定制background 和 handle 组件即可。

  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: "#21be2b"
              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 ? "#f0f0f0" : "#f6f6f6"
          border.color: "#bdbebf"
      }
  }