【QT学习】qml中Slider样式

最新推荐文章于 2025-10-14 16:25:50 发布

原创最新推荐文章于 2025-10-14 16:25:50 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#qt

qml 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍如何在QML中创建自定义Slider组件，包括设置最大值、最小值、步长及初始值，并通过垂直方向展示。同时，文章演示了如何实现滑动时更新文本显示的值，以及如何定制滑块和轨道的样式。

在帮助文档中有介绍slider

因此，在main.qml中

CustomSlider
{
    maximumValue:500
    minimumValue:0
    stepSize: 1
    value: 100
    orientation: Qt.Vertical
    onValueChanged:
    {
        rangeTxt.text = value
    }

}

自定义slider

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Slider {
    id:control

    style:SliderStyle
    {
        handle:customHander
        groove:customGroove

    }

    /*滑块*/
    Component
    {
        id:customHander
        Rectangle {
            anchors.centerIn: parent
            color: "#2371C8"
            implicitWidth: 20
            implicitHeight: 20
            radius: 10
        }
    }


    Component
    {
        id:customGroove
        Rectangle {
            implicitWidth: 200
            implicitHeight: 8
            color: "white"
            radius: 8
            Rectangle
            {
                implicitWidth:(control.value/control.maximumValue)*control.height
                implicitHeight:parent.height
                radius:parent.radius
                color:"#2371C8"
            }
        }
    }

}

最终变成：