qml 自定义Slider

最新推荐文章于 2025-03-25 14:50:37 发布

动物都会叫<^_^>

最新推荐文章于 2025-03-25 14:50:37 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： QML 文章标签： qml 自定义slider qml 滑块 qml进度条

本文链接：https://blog.youkuaiyun.com/qq_21078557/article/details/84396525

QML 专栏收录该内容

11 篇文章

订阅专栏

为解决系统滑块颜色固定的问题，本文介绍了一个基于QML的自定义滑块组件实现。该组件通过模仿进度条效果，允许自定义背景色、透明度、当前值颜色及圆圈颜色，提供更灵活的视觉呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在最前面，由于最近项目需要，需要使用qml的滑块，无奈的是，系统提供的slider颜色是系统的颜色，so，我得自己重新写一个，所以，最后的效果如下：
运行效果

其实这个实现的原理是progress实现的，目前缺点不足的是，我自己感觉和系统的比起来，我的用鼠标拖动的时候，会抖动，这个估计还得做一个抖动处理，等以后再说吧，下面是代码，只给出了重要部分需要的请自己下载。

这一部分是提供给外部的设置属性：

    property int currentValue: 0 // 外部需要显示的值
    property int from: 0  // 起始值
    property int to: 100  // 结束值
    property color backColor: "gray" // 背景条颜色
    property double backOpacity: 0.5 // 背景条透明度
    property color currenColor: "white" // 显示值颜色
    property color circleColor: "white" // 显示值圆圈颜色

这一部分是数值背景显示的实现部分：

    style: ProgressBarStyle{
        background: Rectangle{
            color: backColor
            opacity: backOpacity
        }
        progress: Rectangle{
            color: currenColor
        }
    }

这一部分是调用代码：

 UserSlider{
       anchors.centerIn: parent
       width: parent.width
       height: 10
       currentValue: 0
       onCurrentValueChanged: console.log(currentValue)
 }

余下的代码比较长，我也写了注释的，需要的请自己下载。go here

只要一个积分，不过分哈，老铁。

chat with me： 543985125