Qt自定义美化滑动条

更新时间：2024年11月14日 09:41:24 作者：小狮子安度因

这篇文章主要为大家详细介绍了Qt自定义美化滑动条的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

效果展示

主要代码

头文件

下面是hi控件的头文件，我们继承一个Qt原生的滑动条类QSlider，然后在基类的基础上进行自定义，我会对重要的变量进行解析：

class XSlider : public QSlider
{
    Q_OBJECT
public:
    explicit XSlider(QWidget* parent = nullptr);

protected:
    void paintEvent(QPaintEvent *ev) override;
    void mousePressEvent(QMouseEvent* ev) override;

private:
    int sliderHeight;
    QColor normalColor;
    QColor grooveColor;
    QColor handleBorderColor;
    QColor handleColor;
    QColor textColor;

private slots:
    void initForm();
    void initStyle();

public:
    int getSliderHeight();
    QColor getNormalColor();
    QColor getGrooveColor();
    QColor getHandleBorderColor();
    QColor getHandleColor();
    QColor getTextColor();

private:
    void setSliderHeight(int& sliderHeight);
    void setNormalColor(QColor& normalColor);
    void setGrooveColor(QColor& grooveColor);
    void setHandleBorderColor(QColor& handleBorderColor);
    void setHandleColor(QColor& handleColor);
    void setTextColor(QColor& textColor);

Q_SIGNALS:
    void clicked();
};

Q_OBJECT：让类支持信号和槽

normalColor：没有覆盖部分的颜色

grooveColor：覆盖之后的颜色

handleBorderColor：手柄的边框颜色

handleColor：手柄的颜色

绘制事件 QPaintEvent

void XSlider::paintEvent(QPaintEvent *ev)
{
    // 绘制父类
    QSlider::paintEvent(ev);

    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);

    QStyleOptionSlider opt;
    initStyleOption(&opt);
    QRect rect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);

    int x = rect.x();
    int y = rect.y();
    int width = rect.width();
    int height = rect.height();
    if (width < height) {
        width = height;
    }
    else {
        height = width;
    }

    QFont font;
    font.setPixelSize(width / 2);
    painter.setFont(font);
    painter.drawText(x, y, width, height, Qt::AlignCenter, QString::number(value()));
}

这段代码是一个自定义的Qt滑块控件XSlider的paintEvent函数实现。在这个函数中，滑块的绘制过程改为我们自定义的滑块，具体逻辑如下：

1.调用父类绘制: 使用QSlider::paintEvent(ev);来确保滑块的基本绘制功能得到执行。

2.创建画家对象: QPainter painter(this);创建一个绘图对象，允许在当前控件上进行绘制。

3.设置抗锯齿: painter.setRenderHints(QPainter::Antialiasing);启用抗锯齿，使得绘制的文本和形状更加平滑。

4.初始化样式选项: initStyleOption(&opt);用于获取当前滑块的样式选项，这些选项会影响后续的绘制。

5.获取滑块句柄矩形区域:

QRect rect = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);

通过样式获取滑块句柄的位置和大小。

6.确定宽高一致性: 根据矩形的宽度和高度，确保它们一致。如果宽度小于高度，就将宽度设置为高度；反之亦然。这保证了文本在正方形区域内居中显示。

7.设置字体大小:

QFont font;
font.setPixelSize(width / 2);
painter.setFont(font);

设置字体大小为矩形宽度的一半，以便在控件中适当显示数值。

8.绘制文本:

painter.drawText(x, y, width, height, Qt::AlignCenter, QString::number(value()));

将当前滑块值以文本形式居中绘制到之前计算出的矩形区域内。

初始化

颜色初始化，没有什么好说的，只是要记得初始化一个好看的配色：

void XSlider::initForm()
{
    sliderHeight = 18;
    normalColor = QColor("#A0D7DA");
    grooveColor = QColor("#22A3A9");
    handleBorderColor = QColor("#0E99A0");
    handleColor = QColor("#FFFFFF");
    textColor = QColor("#000000");

    this->setOrientation(Qt::Horizontal);
}

样式表初始化，这个很重要，是自定义的滑动条是否好看的决定性因素：

void XSlider::initStyle()
{
    int sliderRadius = sliderHeight / 2;
    int handleSize = (sliderHeight * 3) / 2 + (sliderHeight / 5);
    int handleRadius = handleSize / 2;
    int handleOffset = handleRadius / 2;

    QStringList list;
    int handleWidth = handleSize + sliderHeight / 5 - 1;
    list.append(QString("QSlider::horizontal{min-height:%1px;color:%2;}").arg(sliderHeight * 2).arg(textColor.name()));
    list.append(QString("QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::add-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::sub-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(grooveColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::handle:horizontal{width:%3px;margin-top:-%4px;margin-bottom:-%4px;border-radius:%5px;"
                        "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.8 %1,stop:0.9 %2);}")
                .arg(handleColor.name()).arg(handleBorderColor.name()).arg(handleWidth).arg(handleOffset).arg(handleRadius));

    //偏移一个像素
    handleWidth = handleSize + sliderHeight / 5;
    list.append(QString("QSlider::vertical{min-width:%1px;color:%2;}").arg(sliderHeight * 2).arg(textColor.name()));
    list.append(QString("QSlider::groove:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::add-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(grooveColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::sub-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::handle:vertical{height:%3px;margin-left:-%4px;margin-right:-%4px;border-radius:%5px;"
                        "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.8 %1,stop:0.9 %2);}")
                .arg(handleColor.name()).arg(handleBorderColor.name()).arg(handleWidth).arg(handleOffset).arg(handleRadius));


    QString qss = list.join("");
    this->setStyleSheet(qss);
}

这段代码是XSlider类的initStyle()函数实现，用于初始化和设置滑块控件的样式。通过使用Qt样式表（QSS），可以自定义滑块的外观。下面对代码进行详细解释：

主要步骤解析

1.计算尺寸参数:

sliderRadius: 计算滑块轨道的半径，通常为滑块高度的一半。

handleSize: 定义滑块手柄的大小，根据滑块高度计算得到。

handleRadius: 手柄半径，为手柄尺寸的一半。

handleOffset: 手柄偏移量，便于后续位置调整。

2.创建样式列表:

使用QStringList list;来存储不同状态下的样式字符串。

3.添加水平样式:

list.append(QString("QSlider::horizontal{min-height:%1px;color:%2;}").arg(sliderHeight * 2).arg(textColor.name()));

- 定义了水平方向上滑块的最小高度及文本颜色。

4.绘制轨道、增加和减少页面背景:

list.append(QString("QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}")
            .arg(normalColor.name()).arg(sliderHeight).arg(sliderRadius));

- 自定义了轨道（groove）、增加页面（add-page）和减少页面（sub-page）的背景色、高度以及边角圆弧。

5自定义手柄样式:

list.append(QString("QSlider::handle:horizontal{width:%3px;margin-top:-%4px;margin-bottom:-%4px;border-radius:%5px;"
                     "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.8 %1,stop:0.9 %2);}")
             .arg(handleColor.name()).arg(handleBorderColor.name()).arg(handleWidth).arg(handleOffset).arg(handleRadius));

- 为水平手柄设置宽度、边距、圆角，并应用径向渐变作为背景，使其外观更具层次感。

6.处理垂直方向样式:

类似于水平方向，对垂直方向上的控件也进行了相应的样式设定，包括最小宽度、轨道颜色以及手柄等。这一部分代码与水平部分逻辑相似，但根据垂直方向调整了参数，如宽度和高度等。

7.应用样式表:

最后，将所有收集到的QSS规则通过以下方式应用到当前控件：

QString qss = list.join("");
this->setStyleSheet(qss);

到此这篇关于Qt自定义美化滑动条的文章就介绍到这了,更多相关Qt美化滑动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Qt
滑动条

嵌入式C程序优质编写全面教程规范
这是一年前我为公司内部写的一个文档，旨在向年轻的嵌入式软件工程师们介绍如何在裸机环境下编写优质嵌入式C程序。感觉是有一定的参考价值，所以拿出来分享，抛砖引玉
2022-04-04
C++ 中dynamic_cast<>的使用方法小结
将一个基类对象指针（或引用）cast到继承类指针，dynamic_cast会根据基类指针是否真正指向继承类指针来做相应处理
2013-03-03
C语言智能指针之weak_ptr浅析
这篇文章主要介绍了 C++11智能指针之weak_ptr详解，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-10-10
C++实现简单的扫雷游戏(控制台版)
这篇文章主要为大家详细介绍了C++实现简单的扫雷游戏，控制台版的扫雷游戏希望大家喜欢，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
数据结构与算法:单向链表实现与封装
今天小编就为大家分享一篇关于数据结构与算法:单向链表实现与封装，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-12-12
详解Qt中线程的使用方法
这篇文章主要为大家详细介绍了Qt中线程的使用方法，文中的示例代码讲解详细，对我们学习Qt有一定的帮助，感兴趣的小伙伴可以跟随小编一起了解一下
2022-12-12
C语言实现三子棋(井字棋)算法
这篇文章主要为大家详细介绍了C语言实现三子棋（井字棋）算法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
C++实现简单单向链表
这篇文章主要为大家详细介绍了C++实现简单单向链表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
C++中基本的输入输出函数使用指南
这篇文章主要介绍了C++中基本的输入输出函数使用指南,是C++入门学习中的基础知识,需要的朋友可以参考下
2015-09-09
详解C/C++ Linux出错处理函数(strerror与perror)的使用
我们知道，系统函数调用不能保证每次都成功，必须进行出错处理，这样一方面可以保证程序逻辑正常，另一方面可以迅速得到故障信息。本文主要为大家介绍两个出错处理函数(strerror、perror)的使用，需要的可以参考一下
2023-01-01