QT 界面实现简单换肤功能

最新推荐文章于 2024-07-17 16:55:00 发布
最新推荐文章于 2024-07-17 16:55:00 发布
阅读量1.1k 收藏
点赞数 1
文章标签： qt 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangzx36/article/details/131227601
版权

https://blog.csdn.net/QQ575787460/article/details/7825983

QSignalMapper

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

我准备了四张图片，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());//设置皮肤窗体为合适的大小
}

 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();
}

运行结果：

 

~我在北京~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QT自定义精美换肤界面
08-15
陆陆续续用QT开发过很多项目，也用QT写过不少私活项目，也写过N个工具，一直梦寐以求能像VC一样可以很方便的有个自定义的界面，QSS的强大让我看到了很好的希望。 特点： 1：无边框窗体，自定义标题栏，鼠标拖动，大小缩放，双击切换。 2：除了少量的几个图片资源外，几乎使用QSS写完所有颜色样式控制。 3：自定义一个QMessageBox对话框，自动换行显示提示信息，可以很方便的调用。 4：使用fontawesome图形字体库，将互联网的优秀资源应用于QT中。 5：彻底公开源码，可以任意随意使用。 6：QT各个版本都可以编译通过，亲测无误。 7：自带提供了四种样式黑色、蓝色、灰色、天蓝色风格供选择，可以自由更改image文件夹下的样式，也可以自己增加一些样式。
QT实现QSS自动换肤
10-06
QT实现QSS自动换肤
Qt C++皮肤生成器：自带17套精美样式，26套漂亮界面，涵盖多种效果，适合初学者学习，支持多平台多编译器，Qt C++皮肤生成器：20套经典换肤，26套精美界面，一键轻松实现自定义皮肤，满足各种U
最新发布
trxheiGLHIWG的博客
07-17 337
综上所述，Qt C++皮肤生成器是一个功能丰富、易于使用的工具，它提供了丰富多样的皮肤样式和界面效果，并且具有一键换肤的功能。8. 自带的quiwidget类，集大成之所长，超级牛逼，内置了无边框的消息框、错误框、询问框、右下角信息框、输入框、日期范围选择框等，支持倒计时关闭，集成图形字体设置方法及根据指定文字获取图片，集成CRC校验、获取应用程序文件名、文件路径、设置窗体居中显示、设置翻译文件、设置编码、设置延时、设置系统时间等各种静态方法，保你满意。这样的兼容性非常好，能够满足不同开发者的需求。
Qt实现换肤功能
07-31
采用样式表实现简单的换肤功能。 请用Qt5.0以上版本编译
Qt 实现界面换肤功能
01-03
Qt实现无边框界面鼠标拖动，换肤功能，标题栏双击放大缩小，自定义对话框，引用fontawesome-webfont图形字体，非常不错的代码学习
Qt - 换肤功能实现
Hsy的博客
05-21 4983
最近在做换肤功能，本文主要介绍目前使用过的几种方法： 1. QStyle 2. QPalette 3. QSS 目前我的QSS Demo中未使用图片...so 还是挺丑的。 另外接收了两个写QSS非常实用的工具： Qsseditor及QssStylesheetEditor 最后，推荐一个开源的CSS demo 以供大家参考。
Qt之界面换肤
weixin_34378045的博客
08-31 2107
简述 常用的软件基本都有换肤功能，例如：QQ、360、迅雷等。换肤其实很简单，并没有想象中那么难，利用前面分享过的QSS系列文章，沃我们完全可以实现各种样式的定制！ 简述 实现原理 效果 新建QSS文件 编写QSS代码 加载QSS 更多参考 实现原理 新建多个QSS文件 为各个QSS文件编写对应的样式代码 ...
基于QT的换肤整体解决方案(QSkinStyle)
热门推荐
slientman的专栏
05-24 3万+
本文来自http://blog.csdn.net/slientman原创，引用必须注明出处！ 基于QT的换肤整体解决方案(QSkinStyle)    对QT这个成功的跨平台GUI库，本身内置了对换肤功能的实现，比如cleanlooks、plastique等跨平台风格；还有一些是和平台相关的风格，比如WindowsXP、WindowsVista风格只能用在windows平台上，底层也会
QT换肤解决方案
RangersTank的博客
10-21 2565
昨天写了篇自己学习感受的博客，竟然有人留言，受此鼓励，趁今天是周末，在写一篇技术性文档，但是又不知道写什么话题，真的是只有在写东西时候，才会知道自己大脑中的这些东西是要整理的，好了废话不说了，由于这是第一次发技术性文档，在此声明下，如果有朋友在阅读中，发下了错误，或者有好的方法，可以联系交流。 大家好，我是tank，那个来自山里的程序员，今天聊下QT开发皮肤的一些问题，知识杂碎，就说到哪里算哪...
QT皮肤界面
12-14
。 特点： 1：无边框窗体，自定义标题栏，鼠标拖动，大小缩放，双击切换。 2：除了少量的几个图片资源外，几乎使用QSS写完所有颜色样式控制。 3：自定义一个QMessageBox对话框，自动换行显示提示信息，可以很方便的调用。 4：使用fontawesome图形字体库，将互联网的优秀资源应用于QT中。 5：彻底公开源码，可以任意随意使用。 6：QT各个版本都可以编译通过，亲测无误。 7：自带提供了四种样式黑色、蓝色、灰色、天蓝色风格供选择，可以自由更改image文件夹下的样式，也可以自己增加一些样式。
基于QT的换肤整体解决方案(QSkinStyle)（无源码）
11-08
具备调用方法简单、集成系统方便、运行稳定高效等功能特点； 界面设计与业务逻辑进行彻底分离： 完全基于QT，不依赖于其他第三方库； 支持QT定义的所有控件； 采用皮肤文件方式，确保在QT支持的各种平台上有一致的外观； 在不同的平台上，支持宿主窗口换肤； 支持多风格：在同一应用程序中支持对不同的窗口使用不同的皮肤； 支持皮肤色调动态变换； 支持皮肤文件加密； （无源码）（无源码）
Qt自定义皮肤
04-29
Qt自定义皮肤切换。。
QT自定义精美换肤界面（转）
10-29
（转）陆陆续续用QT开发过很多项目，也用QT写过不少私活项目，也写过N个工具，一直梦寐以求能像VC一样可以很方便的有个自定义的界面，QSS的强大让我看到了很好的希望。 特点： 1：无边框窗体，自定义标题栏，鼠标...
【QT学习】QSS样式表实现界面换肤（图文详解+源码）
孤生i的博客
09-20 5606
QSS样式表的简单介绍，以及使用QSS样式表实现界面换肤功能。
Qt的皮肤设计
自由飞翔
12-21 360
Qt的皮肤设计，也可以说是对Qt应用程序的界面美化，Qt使用了一种类CSS的样式规则QSS。 一、Style Sheet的应用 1.直接在程序代码中设置样式，利用setStyleSheet()方法 widget-&gt;setStyleSheet("color:red"); //widget内字体颜色为红色 widget-&gt;-&gt;setStyleSheet(QPushButt...
Qt换肤之一：基于QSS
草上爬的博客
05-22 3693
1.新建多个QSS文件 2.为各个QSS文件编写对应的样式代码 3.换肤时，进行全局切换 这种方法只需熟悉QSS文件的写法，好在Qt帮助文档例子很多，要写出好看有个性的效果还得自己多实践 但是皮肤的数量就是QSS文件的个数，软件发布后无法再修改皮肤颜色了换肤的代码如下： 黑色主题QSS文件： 橙色主题QSS文件： 如果出现QSS文件编辑后，样式失效的问题，可参考：Qt修改QSS文件后导致样式表不生效_草上爬的博客-CSDN博客源码链接：TestUI.rar-C++文档类资源-CSDN下载原创不易
探索 Qt Widgets 的皮肤设计新境界：Qui QSS Skin Builder
gitblog_00062的博客
04-23 476
探索 Qt Widgets 的皮肤设计新境界：Qui QSS Skin Builder 项目地址:https://gitcode.com/Qt-Widgets/Qui_QSS_Skin_Builder 项目简介 Qui QSS Skin Builder 是一个基于 Qt 框架的开源工具，专为开发者和设计师提供便捷的方式来设计和构建自定义的 QSS（Qt Style Sheets）皮肤。通过这款工具...
Qt之界面换肤的两种方式
kevin_org
03-05 3590
概述 像现在市面上有很多软甲都有换肤功能，例如：QQ、360、迅雷等。换肤其实很简单，并没有想象中那么难，下面介绍两种实现换肤的方式，仅供参考！ 方式一 1. 实现原理 创建多个QSS文件 每一个QSS文件编写对应控件的样式 界面换肤时，进行切换 方式二 1. 实现原理 创建一个QSS文件 首先，创建一个后缀名为QSS文件，例如style.qss，将其加载到资源文件中（qrc）。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值