Qt Quick - RangeSlider

一、概述

RangeSlider 通过沿着轨道滑动每个滑块来选择由两个值指定的范围。区域值嘛，我没怎么见到过这个

其实也可以想到一个应用的场景就是，把一个变化的值限制在某一个区间，这个就是对区间的一种用法。

        RowLayout{
    
    
            Label{
    
    
                text: "下限："
            }
            Label{
    
    
                id:lowIndex
                text: "0"
            }
            Label{
    
    
                text: "  -  "
            }
            Label{
    
    
                text: "上限："
            }
            Label{
    
    
                id:highIndex
                text: "0"
            }
            Layout.alignment: Qt.AlignHCenter
        }

        RangeSlider {
    
    
            transformOrigin: Item.Center
            from: 1
            to: 100
            first.value: 0
            second.value: 100
            stepSize: 1
            Layout.alignment: Qt.AlignHCenter

            first.onMoved: {
    
    
                lowIndex.text = first.value.toString()
            }

            second.onMoved: {
    
    
                highIndex.text = second.value;
            }
        }

二、使用

RangeSlider通过沿着轨道滑动每个滑块来选择由两个值指定的范围。
在下面的示例中，设置了自定义的from和to值，并设置了 first 和 second 的初始位置:

  RangeSlider {
    
    
      from: 1
      to: 100
      first.value: 25
      second.value: 75
  }

为了在特定句柄的值发生变化时执行操作，使用以下语法:

  first.onMoved: console.log("first.value changed to " + first.value)

first.position 和 second.position 位置属性表示为控件大小的实际值，范围为0.0 - 1.0。第一个。visualPosition和second。visualPosition属性与此相同，只是在从右到左的应用程序中它们是颠倒的。当为RangeSlider添加样式时，visualPosition用于定位手柄。

在上面的例子中，首先。在从左到右的应用中，visualPosition的值为0.24，而在从右到左的应用中，这个值为0.76。

三、样式定制

  import QtQuick 2.12
  import QtQuick.Controls 2.12

  RangeSlider {
    
    
      id: control
      first.value: 0.25
      second.value: 0.75

      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 {
    
    
              x: control.first.visualPosition * parent.width
              width: control.second.visualPosition * parent.width - x
              height: parent.height
              color: "#21be2b"
              radius: 2
          }
      }

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

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