Qt4.8.2 实现简单的界面换肤功能

最新推荐文章于 2024-06-03 20:26:10 发布
最新推荐文章于 2024-06-03 20:26:10 发布
阅读量8.8k 收藏 17
点赞数 1
分类专栏： Qt4 文章标签： qt signal spring 测试 url mfc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ575787460/article/details/7825983
版权

声明下：这只是我自己在学习Qt的时候，想到的，也不知道这方法合不合适，反正是能够实现换肤功能。

一、思路及准备

双击主程序界面，弹出换肤界面，点击换肤界面上的图片，主程序改变相应界面背景图片。

我准备了四张图片，big_spring.png,big_summer.png,small_spring.png,small_summer.png.看名字就知道换肤界面列出来small_spring.png和small_summer.png，点击图片后，主程序界面显示相应大图。

二、皮肤窗口

新建Qt4空项目，新建C++类，继承自QWidget，取名SkinWidget。

头文件暂时不修改，看看SkinWidget.cpp

#include "skinwidget.h"

#include <QPushButton>
#include <QHBoxLayout>

SkinWidget::SkinWidget(QWidget *parent) :
    QWidget(parent)
{
    QStringList btnText;
    btnText<<"spring"<<"summer";
    QHBoxLayout *mainLayout=new QHBoxLayout;
    for(int i=0;i<btnText.length();i++)
    {
        QPushButton *btn=new QPushButton;
        QString qss="background-image:url(:/img/small_"+btnText[i]+".png)";
        btn->setToolTip(btnText[i]);//鼠标停留在按钮上的提示
        btn->setStyleSheet(qss);//设置样式表，按钮的背景图片
        btn->setFixedSize(150,120);//设置按钮固定大小为背景图片的大小
        btn->setFlat(true);//设置按钮的平坦属性，也就是按钮无边框
        mainLayout->addWidget(btn);
    }
    setLayout(mainLayout);
    setFixedSize(sizeHint().width(),sizeHint().height());//设置皮肤窗体为合适的大小
}

新建个main.cpp测试下，

#include <QApplication>
#include "skinwidget.h"
int main(int argc,char *argv[])
{
    QApplication app(argc,argv);
    
    SkinWidget skin;
    skin.show();
    
    return app.exec();
}


看样子还马马虎虎，可以继续进行。

三、主程序窗口

新建C++类MainWidget，继承自QWidget。我们想实现双击主程序，弹出换肤窗体，就必须捕捉到双击时间，类似于MFC的OnDbClick。

先看看基类QWidget提供的虚函数



虚函数就是基类提供的，在我们需要的时候去重载的接口，所以在MainWidget头文件中，重载鼠标双击事件函数。

MainWidget.h

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>

class MainWidget : public QWidget
{
    Q_OBJECT
public:
    explicit MainWidget(QWidget *parent = 0);
    
signals:
    
public slots:

protected:
    virtual void mouseDoubleClickEvent(QMouseEvent *);//重载鼠标双击事件函数 从QWidget继承
};

#endif // MAINWIDGET_H


 MainWidget.cpp

#include "mainwidget.h"

#include <QMouseEvent>//鼠标事件
#include <QPalette>//调色板 设置背景颜色

#include <QMessageBox>

MainWidget::MainWidget(QWidget *parent) :
    QWidget(parent)
{
    setFixedSize(500,400);
    QPalette palette;
    palette.setBrush(QPalette::Background,QBrush(QPixmap(":/img/big_spring.png")));
    setPalette(palette);
}

void MainWidget::mouseDoubleClickEvent(QMouseEvent *event)
{
    //如果双击鼠标左键，弹出测试对话框
    if(event->button()&Qt::LeftButton)
        QMessageBox::information(this,"skin","leftButton double click test");
}


测试一下，结果还行。

 四、皮肤窗口与主程序窗口的交互 和QSignalMapper类

在主窗口双击事件中，弹出皮肤窗体，然后把皮肤窗体各个按钮的clicked信号同主程序不同背景的槽连接起来

SkinWidget.h

#ifndef SKINWIDGET_H
#define SKINWIDGET_H

#include <QWidget>

class SkinWidget : public QWidget
{
    Q_OBJECT
public:
    explicit SkinWidget(QWidget *parent = 0);
    
signals:
    void changeSkinSpring();//与春天按钮的clicked信号绑定
    void changeSkinSummer();//与夏天按钮的clicked信号绑定
private slots:

};

#endif // SKINWIDGET_H


SkinWidget.cpp

#include "skinwidget.h"

#include <QPushButton>
#include <QHBoxLayout>

SkinWidget::SkinWidget(QWidget *parent) :
    QWidget(parent)
{
    QStringList btnText;
    btnText<<"spring"<<"summer";
    QHBoxLayout *mainLayout=new QHBoxLayout;
    for(int i=0;i<btnText.length();i++)
    {
        QPushButton *btn=new QPushButton;
        QString qss="background-image:url(:/img/small_"+btnText[i]+".png)";
        btn->setToolTip(btnText[i]);//鼠标停留在按钮上的提示
        btn->setStyleSheet(qss);//设置样式表，按钮的背景图片
        btn->setFixedSize(150,120);//设置按钮固定大小为背景图片的大小
        btn->setFlat(true);//设置按钮的平坦属性，也就是按钮无边框
        mainLayout->addWidget(btn);
        switch(i)
        {
        case 0:
            QObject::connect(btn,SIGNAL(clicked()),this,SIGNAL(changeSkinSpring()));
            break;
        case 1:
            QObject::connect(btn,SIGNAL(clicked()),this,SIGNAL(changeSkinSummer()));
            break;
        }
    }
    setLayout(mainLayout);
    setFixedSize(sizeHint().width(),sizeHint().height());//设置皮肤窗体为合适的大小
}


MainWidget.h

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>

class MainWidget : public QWidget
{
    Q_OBJECT
public:
    explicit MainWidget(QWidget *parent = 0);
    
signals:
    
private slots:
    void setBkSpring();//与SkinWidget的changeSkinSpring信号连接
    void setBkSummer();//与SkinWidget的changeSkinSummer信号连接

protected:
    virtual void mouseDoubleClickEvent(QMouseEvent *);//重载鼠标双击事件函数 从QWidget继承
};

#endif // MAINWIDGET_H


MainWidget.cpp

#include "mainwidget.h"
#include "skinwidget.h"
#include <QMouseEvent>//鼠标事件
#include <QPalette>//调色板 设置背景颜色

MainWidget::MainWidget(QWidget *parent) :
    QWidget(parent)
{
    setFixedSize(500,400);
    QPalette palette;
    palette.setBrush(QPalette::Background,QBrush(QPixmap(":/img/big_spring.png")));
    setPalette(palette);
}

void MainWidget::mouseDoubleClickEvent(QMouseEvent *event)
{
    SkinWidget *skin=new SkinWidget;
    skin->setAttribute(Qt::WA_DeleteOnClose);
    QObject::connect(skin,SIGNAL(changeSkinSpring()),this,SLOT(setBkSpring()));
    QObject::connect(skin,SIGNAL(changeSkinSummer()),this,SLOT(setBkSummer()));
    skin->show();
}

//private slot 换肤 春天
void MainWidget::setBkSpring()
{
    QPalette palette;
    palette.setBrush(QPalette::Background,QBrush(QPixmap(":/img/big_spring.png")));
    setPalette(palette);
}
//private slot 换肤 夏天
void MainWidget::setBkSummer()
{
    QPalette palette;
    palette.setBrush(QPalette::Background,QBrush(QPixmap(":/img/big_summer.png")));
    setPalette(palette);
}


 

运行下，确实可以。

但是，这是个好办法么，如果有1000张候选图片，我们就要建立1000个槽函数？？？？

如果可以把图片的名字当作信号的参数多好啊，就是点击春天按钮的时候，把“spring”这个字符串当作信号的参数。点击夏天按钮的时候，把“summer”这个字符串当作信号的参数。问题转化为：如何把一个无参信号同一个有参信号联系起来。

终于，在网上搜到了这个类QSignalMapper。这个类可以看成信号的翻译和转发器，可以把无参信号翻译成带int参数、QString参数、QObject*参数或者QWidget*参数的信号， 并将之转发。

源码如下：

SkinWidget.h

#ifndef SKINWIDGET_H
#define SKINWIDGET_H

#include <QWidget>

class QSignalMapper;
class SkinWidget : public QWidget
{
    Q_OBJECT
public:
    explicit SkinWidget(QWidget *parent = 0);
    
signals:
    void skinChange(QString);

private slots:
private:
    QSignalMapper *signalMapper;

};

#endif // SKINWIDGET_H


SkinWidget.cpp

#include "skinwidget.h"

#include <QPushButton>
#include <QHBoxLayout>
#include <QSignalMapper>

SkinWidget::SkinWidget(QWidget *parent) :
    QWidget(parent)
{
    signalMapper=new QSignalMapper(this);

    QStringList btnText;
    btnText<<"spring"<<"summer";
    QHBoxLayout *mainLayout=new QHBoxLayout;
    for(int i=0;i<btnText.length();i++)
    {
        QPushButton *btn=new QPushButton;
        QString qss="background-image:url(:/img/small_"+btnText[i]+".png)";
        btn->setToolTip(btnText[i]);//鼠标停留在按钮上的提示
        btn->setStyleSheet(qss);//设置样式表，按钮的背景图片
        btn->setFixedSize(150,120);//设置按钮固定大小为背景图片的大小
        btn->setFlat(true);//设置按钮的平坦属性，也就是按钮无边框
        mainLayout->addWidget(btn);

        QObject::connect(btn,SIGNAL(clicked()),signalMapper,SLOT(map()));
        signalMapper->setMapping(btn,btnText[i]);
    }

    connect(signalMapper,SIGNAL(mapped(QString)),this,SIGNAL(skinChange(QString)));
    setLayout(mainLayout);
    setFixedSize(sizeHint().width(),sizeHint().height());//设置皮肤窗体为合适的大小
}

QSignalMapper

 MainWidget.h

#ifndef MAINWIDGET_H
#define MAINWIDGET_H

#include <QWidget>

class MainWidget : public QWidget
{
    Q_OBJECT
public:
    explicit MainWidget(QWidget *parent = 0);
    
signals:
    
private slots:
    void setBk(QString);

protected:
    virtual void mouseDoubleClickEvent(QMouseEvent *);//重载鼠标双击事件函数 从QWidget继承
};

#endif // MAINWIDGET_H


MainWidget.cpp

#include "mainwidget.h"
#include "skinwidget.h"
#include <QMouseEvent>//鼠标事件
#include <QPalette>//调色板 设置背景颜色

MainWidget::MainWidget(QWidget *parent) :
    QWidget(parent)
{
    setFixedSize(500,400);
    setBk("spring");
}

void MainWidget::mouseDoubleClickEvent(QMouseEvent *event)
{
    if(event->button()&Qt::LeftButton)
    {
        SkinWidget *skin=new SkinWidget;
        skin->setAttribute(Qt::WA_DeleteOnClose);
        QObject::connect(skin,SIGNAL(skinChange(QString)),this,SLOT(setBk(QString)));
        skin->show();
    }
}

//private slot
void MainWidget::setBk(QString picName)
{
    QPalette palette;
    palette.setBrush(QPalette::Background,QBrush(QPixmap(":/img/big_"+picName+".png")));
    setPalette(palette);
}


main.cpp

#include <QApplication>
#include "skinwidget.h"
#include "mainwidget.h"
int main(int argc,char *argv[])
{
    QApplication app(argc,argv);

  //  SkinWidget skin;
  //  skin.show();

    MainWidget mainWindow;
    mainWindow.show();

    return app.exec();
}


运行结果：

coderchenjingui
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Qt 使用Qss实现切换皮肤 最简单示例
10-21
Qt 使用Qss实现切换皮肤 最简单示例
Qt 实现界面换肤功能
01-03
Qt实现无边框界面鼠标拖动，换肤功能，标题栏双击放大缩小，自定义对话框，引用fontawesome-webfont图形字体，非常不错的代码学习
Qt C++皮肤生成器：20套换肤、26套精美界面，轻松实现一键换肤和自定义皮肤（38字），Qt C++皮肤生成器：20套经典换肤，26套精美界面，一键轻松实现自定义皮肤，满足各种UI需求
最新发布
UWzyXSXJ的博客
06-03 344
uidemo由简入难，可以一步步学习下去，从入门到熟悉，同时涵盖了常规的客户端、app端以及触摸端等操作方式，使得开发者可以全面了解和掌握Qt C++的界面开发技术。8. 自带的quiwidget类，集大成之所长，超级牛逼，内置了无边框的消息框、错误框、询问框、右下角信息框、输入框、日期范围选择框等，支持倒计时关闭，集成图形字体设置方法及根据指定文字获取图片，集成CRC校验、获取应用程序文件名、文件路径、设置窗体居中显示、设置翻译文件、设置编码、设置延时、设置系统时间等各种静态方法，保你满意。
Qt之界面换肤
weixin_34378045的博客
08-31 2093
简述 常用的软件基本都有换肤功能，例如：QQ、360、迅雷等。换肤其实很简单，并没有想象中那么难，利用前面分享过的QSS系列文章，沃我们完全可以实现各种样式的定制！ 简述 实现原理 效果 新建QSS文件 编写QSS代码 加载QSS 更多参考 实现原理 新建多个QSS文件 为各个QSS文件编写对应的样式代码 ...
QT 界面实现简单换肤功能
zhangzx36的博客
06-15 1131
我准备了四张图片，big_spring.png,big_summer.png,small_spring.png,small_summer.png.看名字就知道换肤界面列出来small_spring.png和small_summer.png，点击图片后，主程序界面显示相应大图。如果可以把图片的名字当作信号的参数多好啊，就是点击春天按钮的时候，把“spring”这个字符串当作信号的参数。虚函数就是基类提供的，在我们需要的时候去重载的接口，所以在MainWidget头文件中，重载鼠标双击事件函数。
用QT开发软件怎么实现一键换肤
weixin_42600407的博客
01-31 294
QT开发软件实现一键换肤可以使用QSS样式表和QResource动态加载资源。 创建不同的QSS样式表文件，定义不同的样式。 使用QResource动态加载样式表文件。 在程序中设置当前使用的样式表。 代码示例： QFilefile(":/qss/blue.qss"); file.open(QFile::ReadOnly); QString styleSheet = QString::from...
QT自定义精美换肤界面
zhaominyong的专栏
07-23 1885
陆陆续续用QT开发过很多项目，也用QT写过不少私活项目，也写过N个工具，一直梦寐以求能像VC一样可以很方便的有个自定义的界面，QSS的强大让我看到了很好的希望，辗转百度谷歌无数次，一直搜索QT相关的换肤文章，绝大部分的是一些简单的按钮文本样式，要做到整体换肤程度几乎不行，QTCN论坛里的奋斗的孩子写了个模仿360安全卫士系列，让我既惊喜有遗憾，惊喜的是能够用QT实现一个这么完整的360安全卫士界面，确实不错，也支持多种换肤，遗憾的是我下载过的是VC版本的，对于一直执着于用Qt Creator来开发的我来说.
【QT学习】QSS样式表实现界面换肤（图文详解+源码）
孤生i的博客
09-20 5325
QSS样式表的简单介绍，以及使用QSS样式表实现界面换肤功能。
Qt4.8.2 界面换肤
08-03
在"Qt4.8.2 界面换肤"的主题中，我们主要关注的是如何在使用Qt4.8.2开发的软件中实现用户界面的个性化和动态换肤功能。 1. **QSS（Qt StyleSheet）**：Qt4引入了类似CSS（层叠样式表）的概念，称为QSS，用于控制Qt...
QT4.8.2 qt-creator-enterprise-windows-x86-64-4.8.2-1
12-18
QT4.8.2 qt-creator-enterprise-windows-x86_64-4.8.2-1
Qt4.8.2 Qt实现360安全卫士界面
08-24
在本文中，我们将深入探讨如何使用Qt 4.8.2框架来实现360安全卫士的用户界面。360安全卫士是一款在中国广受欢迎的安全软件，它提供了多种功能，包括病毒查杀、系统优化和网络安全保护。Qt是一个跨平台的C++图形用户...
qt4.8.2安装包qt-everywhere-opensource-src-4.8.2.tar.gz
07-20
Qt是一个强大的跨平台应用程序开发框架，广泛用于创建GUI（图形用户界面）应用程序，同时也支持命令行界面和无界面的后台服务。在这个场景中，我们关注的是`qt4.8.2`的开源版本，即`qt-everywhere-opensource-src-...
VS2010下基于Qt4.8.2实现的银行家算法程序
11-01
在这个“VS2010下基于Qt4.8.2实现的银行家算法程序”中，开发人员使用了Visual Studio 2010作为集成开发环境，Qt 4.8.2作为一个强大的跨平台应用程序和用户界面开发框架，来模拟和演示银行家算法的工作原理。...
Qt系列——优美界面设计实现不同换肤
Alex_XT的博客
06-16 2114
一、QT不同皮肤设置 本程序的BaseWindow是继承于QWidget，如果大家想要继承QMainWindow，则需要把BaseWindow的基类改为QMainWindow。 去掉窗口自带的边框，Qt中直接用一下代码即可去除窗口边框效果。 //1.------设置窗体标题栏隐藏 this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint); 标题
qss
fengxinya的专栏
12-05 1163
<br />借用css 的灵感， Qt也支持Qt自己的css, 简称qss。同css 相似，qss的主要功能与最终目的都是能使界面的表现与界面的元素分离，即质与形的分离，就如同一个人可以在不同的时候穿上不同的衣服一样，css机制的引入，使得设计一种皮肤与界面控件分离的软件成为可能，应用程序也能像web界面那样随意地改变外观。<br /><br />一、QSS语法<br /><br />同css一样，他也有由一个selector与一个declaration组成，selector指定了是对哪一个控件产生效果，而
基于QT的换肤整体解决方案(QSkinStyle)（提供Linux的XP风格）
wangchaoqi1985的博客
08-11 204
基于QT的换肤整体解决方案(QSkinStyle)（提供Linux的XP风格）
Qt自定义换肤(动态加载QSS)
shenmingyi.blog.csdn.net
08-05 6744
Qt自定义换肤(动态加载QSS) 现在都11点了明天还要上班我这里就简单写一下吧，qss怎么写百度一下吧和css很像 先上效果图 很不清晰 还带水印 凑合看吧 我没用过无水印高清并且免费的 视频录制工具 知道的告诉我一下多谢 酷炫黑皮肤: 靓丽红皮肤: 直接贴一下加载qss的代码 困死了！！！ #ifndef LOADQSS_H #define LOADQSS_H #...
基于QT的换肤整体解决方案(QSkinStyle)
热门推荐
slientman的专栏
05-24 3万+
本文来自http://blog.csdn.net/slientman原创，引用必须注明出处！ 基于QT的换肤整体解决方案(QSkinStyle)    对QT这个成功的跨平台GUI库，本身内置了对换肤功能的实现，比如cleanlooks、plastique等跨平台风格；还有一些是和平台相关的风格，比如WindowsXP、WindowsVista风格只能用在windows平台上，底层也会
1>.\pPartMat.cpp(277) : error C2039: “setCurrentText”: 不是“QComboBox”的成员 1> e:\server\qt4.8.2\x64\include\qtgui\qcombobox.h(62) : 参见“QComboBox”的声明
07-08
在Qt中，确实没有名为"setCurrentText"的函数。要设置QComboBox的选中项，您可以使用setCurrentIndex或setCurrentText函数。以下是示例代码： ```cpp QComboBox* comboBox = new QComboBox(this); comboBox->...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值