QML输入控件: Slider的基础用法与样式_qml slider 样式设置-CSDN博客

本文链接：https://blog.csdn.net/u011186532/article/details/146919471

引言

在现代UI设计中，滑块控件是一种常见且直观的输入方式，用于让用户从一个连续或离散的数值范围中选择值。Qt Quick中的Slider组件提供了这一功能，它不仅易于使用，还可以根据应用需求进行高度定制。本文将详细介绍QML中Slider控件的基础用法和样式定制方法，通过5个具体示例帮助开发者快速掌握这一控件的使用技巧。

Slider的基础属性

根据Qt官方文档，以下是Slider控件的主要属性：

属性名	类型	描述
from	real	滑块的最小值，默认为0
to	real	滑块的最大值，默认为1
value	real	滑块的当前值，默认为0
stepSize	real	滑块的步进大小，默认为0（连续变化）
orientation	Qt.Orientation	滑块的方向，可以是Qt.Horizontal或Qt.Vertical，默认为Qt.Horizontal
pressed	bool	指示滑块当前是否被按下
snapMode	enumeration	滑块的对齐模式，可以是Slider.NoSnap, Slider.SnapOnRelease或Slider.SnapAlways
position	real	滑块的逻辑位置（0.0到1.0之间）
visualPosition	real	滑块的视觉位置（0.0到1.0之间，考虑了UI方向）
handle	Item	用于自定义滑块手柄的组件
background	Item	用于自定义滑块背景的组件

基础用法

1. 基本滑块

最简单的滑块只需设置其位置和大小：

// SliderBase.qml
import QtQuick
import QtQuick.Controls

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Slider")

    Slider {
        anchors.centerIn: parent
        width: parent.width * 0.8
    }
}

要点说明：

创建了一个水平滑块
滑块宽度为窗口宽度的80%
使用默认的from(0)和to(1)值
使用默认样式

运行效果：
简单的滑块

2. 设置数值范围

可以通过from、to和stepSize属性设置滑块的数值范围和步进：

// SliderRange.qml
import QtQuick
import QtQuick.Controls

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Slider - Range")

    Slider {
        anchors.centerIn: parent
        width: parent.width * 0.8
        from: 0
        to: 100
        value: 50
        stepSize: 5
        onValueChanged: console.log("Current value:", value)
    }
}

要点说明：

设置滑块范围为0到100
初始值为50
设置步进值为5，滑块值会按5的倍数变化
添加了onValueChanged信号处理，在值变化时输出当前值到控制台

运行效果：
设置数值范围

3. 垂直滑块

通过设置orientation属性可以创建垂直滑块：

// SliderVertical.qml
import QtQuick
import QtQuick.Controls

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Slider - Vertical")

    Slider {
        height: 200
        anchors.centerIn: parent
        orientation: Qt.Vertical
    }
}

要点说明：

设置orientation为Qt.Vertical创建垂直滑块
设置滑块高度为200像素
使用默认的值范围和样式

运行效果：
垂直滑块

样式定制

1. 自定义滑块手柄

可以通过handle属性自定义滑块的手柄部分：

// SliderStyle1.qml
import QtQuick
import QtQuick.Controls

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Slider - Style1")

    Slider {
        anchors.centerIn: parent
        width: parent.width * 0.8
        handle: Rectangle {
            x: parent.leftPadding + (parent.horizontal ? parent.visualPosition * (parent.availableWidth - width) : (parent.availableWidth - width) / 2)
            y: parent.topPadding + (parent.horizontal ? (parent.availableHeight - height) / 2 : parent.visualPosition * (parent.availableHeight - height))
            width: 24
            height: 24
            radius: 12
            color: parent.pressed ? "#f0f0f0" : "#ffffff"
            border.color: "#cccccc"

            Rectangle {
                anchors.centerIn: parent
                width: 8
                height: 8
                radius: 4
                color: "#21be2b"
            }
        }
    }
}

要点说明：

使用Rectangle创建自定义手柄
手柄为一个24x24像素的圆形
手柄内部有一个小的绿色圆点
当手柄被按下时，颜色会变浅
使用visualPosition属性计算手柄位置，支持水平和垂直方向

运行效果：
自定义滑块手柄

2. 添加刻度标记

更复杂的样式，如添加刻度标记：

// SliderStyle2.qml
import QtQuick
import QtQuick.Controls

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Slider - Style2")

    Column {
        anchors.centerIn: parent
        width: parent.width * 0.8
        spacing: 10

        Slider {
            id: slider
            width: parent.width
            from: 0
            to: 100
            value: 50
            stepSize: 10
            snapMode: Slider.SnapAlways
        }

        Item {
            width: parent.width
            height: 30

            Repeater {
                model: 11  // 0到100，每10一个刻度，共11个数字
                
                Column {
                    x: slider.leftPadding + index * ((slider.availableWidth) / 10) - width/2
                    spacing: 4

                    Rectangle {
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: 2
                        height: 10
                        color: "#808080"
                    }

                    Text {
                        text: (index * 10).toString()
                        color: "#808080"
                        font.pixelSize: 12
                    }
                }
            }
        }
    }
}

要点说明：