QML基本组件 滑动条 Slider

描述

Slider通过手柄沿轨迹滑动来设置数值。

Qt帮助文档搜索 “slider” 获取详细信息。

属性

from : real
to : real
value : real
orientation : enumeration
stepsize : real
touchDragThreshold : qreal

信号

onValueChange {}

---

import QtQuick
import QtQuick.Controls

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

    Slider {
        id: slider
        x: 100
        y: 100
        width: 300
        height: 20
        from: 0
        to: 100
        stepSize: 1

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

            Rectangle {
                // slider.visualPosition 可视比例
                width: slider.visualPosition * parent.width
                height: parent.height
                color: "#21be2b"
                radius: height /2
            }
        }

        handle: Rectangle {
            x: slider.leftPadding + slider.visualPosition * (slider.availableWidth-width)
            y: slider.topPadding + slider.availableHeight /2 - height/2
            implicitWidth: 32
            implicitHeight: 32
            radius: implicitHeight / 2
            color: slider.pressed ? "#F0F0F0" : "#F6F6F6"
            border.width: 1
            border.color: "#bdbebf"
        }

        Label {
            id: valueLabel
            anchors.left: slider.right
            anchors.leftMargin: 10
            anchors.verticalCenter: slider.verticalCenter
            font.pixelSize: 32
            color: "#21be2b"
            text: slider.value
        }
    }
}

background: Rectangle {
            x: slider.leftPadding
            y: slider.topPadding + slider.availableHeight / 2 - height / 2

handle: Rectangle {
	//qt进度条触控区域两端会自动减去handle的的宽度
		x: slider.leftPadding + slider.visualPosition * (slider.availableWidth-width)