首页 > 其他分享 >Qt滑动条美化自定义

Qt滑动条美化自定义

时间：2024-11-12 15:46:00浏览次数：3  
标签：QColor Qt 自定义 list QSlider QString arg sliderHeight 美化

效果展示

主要代码

头文件

下面是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);

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

  1. 确定宽高一致性: 根据矩形的宽度和高度，确保它们一致。如果宽度小于高度，就将宽度设置为高度；反之亦然。这保证了文本在正方形区域内居中显示。
  2. 设置字体大小:
QFont font;
font.setPixelSize(width / 2);
painter.setFont(font);

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

  1. 绘制文本:
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()));

- 定义了水平方向上滑块的最小高度及文本颜色。
  1. 绘制轨道、增加和减少页面背景:
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）的背景色、高度以及边角圆弧。
  1. 自定义手柄样式:
 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));

- 为水平手柄设置宽度、边距、圆角，并应用径向渐变作为背景，使其外观更具层次感。
  1. 处理垂直方向样式:
    类似于水平方向，对垂直方向上的控件也进行了相应的样式设定，包括最小宽度、轨道颜色以及手柄等。这一部分代码与水平部分逻辑相似，但根据垂直方向调整了参数，如宽度和高度等。
  2. 应用样式表:
    最后，将所有收集到的QSS规则通过以下方式应用到当前控件：
QString qss = list.join("");
this->setStyleSheet(qss);

开源地址

http://gitea.huangyanjie.com/lennlouis/qtextendwidget
如果克隆失败请再试一次，或者直接选择下载。

参考资料：https://it.0voice.com

标签：QColor,Qt,自定义,list,QSlider,QString,arg,sliderHeight,美化
From： https://blog.csdn.net/H520xcodenodev/article/details/143716781

相关文章

  • Qt - 信号与槽的第五个参数
    connent函数第五个参数的作用connect(constQObject*sender,constchar*signal,constQObject*receiver,constchar*method,Qt::ConnectionTypetype=Qt::AutoConnection)第五个参数代表槽函数在哪个线程中执行：自动连接(Qt::AutoConnection)，默认的连接方式，如果信号......
  • express使用morgan+file-stream-rotator实现自定义日志+轮转
    importexpress,{json}from'express';importfsfrom'fs';importpathfrom'path';importmorganfrom'morgan';importFileStreamRotatorfrom'file-stream-rotator';constapp=express();//自动采集一些东西//......
  • 自定义 LangChain 组件：打造专属 RAG 应用
    引言在构建专业的检索增强生成（RAG）应用时，LangChain提供了丰富的内置组件。然而，有时我们需要根据特定需求定制自己的组件。本文将深入探讨如何自定义LangChain组件，特别是文档加载器、文档分割器和检索器，以打造更加个性化和高效的RAG应用。自定义文档加载器LangChain的文档......
  • Qt构建与解析Json示例
    本文以B站UP主“明王讲QT”的【QT开发专题-天气预报】中的章节内容作为学习Qt中构建、解析Json的参考方法。1、Json文本{"info":{"asian":true,"captical":"beijing","founded":1949},"name":"China&qu......
  • RL 基础 | 如何使用 OpenAI Gym 接口，搭建自定义 RL 环境（详细版）
    参考：官方链接：Gymdocumentation|Makeyourowncustomenvironment腾讯云|OpenAIGym中级教程——环境定制与创建知乎|如何在Gym中注册自定义环境？g，写完了才发现自己曾经写过一篇：RL基础|如何搭建自定义gym环境（这篇博客适用于gym的接口，gymnasium接口也差不......
  • Qt读写文件简单示例
    voidtestReadWriteFile(){//当前程序所在文件夹QStringdirPath=QCoreApplication::applicationDirPath();QStringpath=QDir::cleanPath(dirPath+QDir::separator()+"test.txt");qDebug()<<"Filepath:"<<path;......
  • 【MQTT】代理服务比较RabbitMQ、Mosquitto 和 EMQX
    前言目前要处理大量设备同时频繁发送数据的情况，MQTT协议确实是一个更优的选择，因为它特别适合需要低带宽和高效能的物联网应用，下面是对目前主流协议的对比数据截止日期：2024年11月10日基础设施后端：springcloud项目设备端：IOT设备，每秒上报数据对比项特性RabbitMQMosqui......
  • 零声QT学习 一
    intmain(intargc,char*argv[]){QApplicationa(argc,argv); //QApplicationa(argc,argv),针对QWidget应用程序,管理和设置Qt程序的运行 //QGuiApplicationa(argc,argv),针对非QWidget应用程序,如QQuick //QcoreApplicationa(argc,argv),针对无界面的应用程序......
  • 编写starrocks的自定义函数
    编写StarRocks的自定义函数前提条件StarRocks使用udf函数需要满足以下条件:安装jdk1.8开启udf功能，在FE的配置文件fe/conf/fe.conf中设置配置项enable_udf为true，并且重启FE节点使配置生效开发使用UDF函数创建maven项目，并且用java实现udf函数创建maven项目并且添加以......
  • Qt边推流边录制/实时性好延迟低/16路1080P推流加录制只占1%CPU/优化到极致
    一、前言这个一边推流一边录制的功能，有很多用户提到过，之前因为时间的原因，一直没有搞，年初的时候索性抽空搞了下，也着实费了些功夫。推流用的是ffmpeg这个开源的牛逼的第三方库，搞音视频开发的人应该没人不认识这个库，养活了很多程序员以及厂家，甚至不乏一些大厂，如果能把ffmpeg搞精通，在......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99