Qt仿iOS风格的滑动条

最新推荐文章于 2024-05-13 21:09:02 发布

逗神大人

最新推荐文章于 2024-05-13 21:09:02 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： C++ Qt 文章标签： C++ Qt 滑动条 Slider

本文链接：https://blog.youkuaiyun.com/oyoung_2012/article/details/79443091

本文介绍如何在Qt中创建一个仿iOS风格的滑动条。通过继承QWidget，组合QLabel和QPushButton，设置样式表以及自定义接口，实现滑动条的背景、前景和值的动态变化。值范围限定在0.0~1.0之间，超出范围的值会被忽略。

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

由于Qt自带的QSlider自身的限制，无法获得像iOS中的那种滑动条的效果，于是自己做了一个出来
实现原理很简单，使用原有控件组合的方式就可以了

第一步，继承QWidget 创建一个RichSlider

第二步，在RichSlider 上先后放置两个QLabel, 然后清空文字内容，设置objName为bgLabel(滑动条背景)、frontLabel (滑动条前景)，接着拖动一个QPushButton上去，清空文本

第三步，按下面图片中给三个子控件进行布局

这里写图片描述

第四步，给RichSlider设置样式表来设置各个子控件的背景色和圆角半径

QLabel#bgLabel {
   
   
	border-radius: 4px;
	background-color: gray;
}
QLabel#frontLabel {
   
   
	border-radius: 4px;
	background-color: green;
}
QPushButton#trackButton {
   
   
	border-radius: 8px;
	background-color: white;
}

第五步, 完善头文件中的接口，包括属性和方法(如setValue(double)等，还有重要的信号valueChanged(double), 本控件中value的值限制在了(0.0 ~ 1.0)直接，超出范围的值自动忽略

#ifndef RICHSLIDER_H
#define RICHSLIDER_H

#include <QWidget>
#include <QColor>

namespace Ui {
   
   
class RichSlider;
}

class RichSlider : public QWidget
{
   
   
    Q_OBJECT
    Q_PROPERTY(double value READ value WRITE setValue NOTIFY valueChanged)
    Q_PROPERTY(int tintHeight READ tintHeight WRITE setTintHeight)
    Q_PROPERTY(QColor frontTintColor READ frontTintColor WRITE setFrontTintColor)
    Q_PROPERTY(QColor backgroundTintColor READ backgroundTintColor WRITE setBackgroundTintColor)
    Q_PROPERTY(QColor trackTintColor READ trackTintColor WRITE setTrackTintColor)

public:
    explicit RichSlider(QWidget *parent = 0);
    ~RichSlider();

    double value() const;
    void setValue(double value);

    QColor backgroundTintColor() const;
    void setBackgroundTintColor(const QColor &color);

    QColor frontTintColor() const;
    void setFrontTintColor(const QColor& color);

    QColor trackTintColor() const;
    void setTrackTintColor(const QColor& color);

    QString trackButtonImage() const;
    void setTrackButtonImage(const QString& path);

    int tintHeight() const;
    void setTintHeight(int height);


protected