• 49239阅读
  • 82回复

QT自定义精美换肤界面 [复制链接]

上一主题 下一主题
离线liudianwu
 

图酷模式  只看楼主 倒序阅读 楼主  发表于: 2014-08-15
— 本帖被 XChinux 执行加亮操作(2016-04-22) —
陆陆续续用QT开发过很多项目,也用QT写过不少私活项目,也写过N个工具,一直梦寐以求能像VC一样可以很方便的有个自定义的界面QSS的强大让我看到了很好的希望,辗转百度谷歌无数次,一直搜索QT相关的换肤文章,绝大部分的是一些简单的按钮文本样式,要做到整体换肤程度几乎不行,QTCN论坛里的奋斗的孩子写了个模仿360安全卫士系列,让我既惊喜有遗憾,惊喜的是能够用QT实现一个这么完整的360安全卫士界面,确实不错,也支持多种换肤,遗憾的是我下载过的是VC版本的,对于一直执着于用Qt Creator 来开发的我来说,不大喜欢,工程文件之多之复杂,对于追求精简美的我来说更是觉得别扭,当然源码学习参考价值还是很高的,只是个人不大喜欢而已。陆续看过slientmanQT整体换肤方案,链接地址:http://blog.csdn.net/slientman/article/details/5618950也从CSDN下过该可执行文件,也不知道是作者粗心还是故意,居然没有自带QT运行库,导致我电脑上试过几个版本的运行库都不行,作者也说了,花了很多精力,不打算开源,这个对于喜欢分享的我来说,心里又是一睹,不过本人还是带着诚意加过作者QQ,愿意自费购买一套,也一直没有得到作者的回复,有点失望。后面又在博客园里面看到24K纯开源http://www.cnblogs.com/csuftzzk/)、文艺IT男(http://www.cnblogs.com/appsucc/)、liulunhttp://www.cnblogs.com/liulun/)等几位大侠写过的类似工具,尤其是这篇文章(http://www.cnblogs.com/liulun/p/3775294.html)让我认识到了还有fontawesome这个好东西,真心感谢作者!
在看过这么多习惯文章后,着手开始自己的QUI编写过程,一开始设想的是参照这篇文章http://www.cnblogs.com/appsucc/p/3257661.html来进行开发,封装成一个DLL,提供外部接口给需要加上皮肤的窗体调用,当开发完成之后,才发现还是会有一系列的问题,例如当主窗体需要关闭时,需调用this.parent().close()类似方法才可以关闭窗体,而且必须是QWidget才能加入到子窗体中,当有相关QDialog窗体打开需要给出返回值时,不能方便的提供done1)这样的方法返回,后面索性抛弃了这种做法,还是采用QSS样式调用,相关样式都已经在样式表中写好,无非就五种颜色,采用了上下两种渐变颜色,normal两种,hover(select,focus)两种,还有一个是文字颜色,只要将对应样式表替换这五种颜色即可,当然大部分时候替换的是四种颜色,文字颜色默认为白色,通用绝大部分渐变颜色。

核心处理部分:
1:无边框窗体处理
对标题栏安装eventFilter事件监听器监听鼠标双击事件,重载mouseMoveEventmousePressEventmouseReleaseEvent三个事件实现鼠标拖动,当窗体改变大小后还必须用QRect location;来记住当前窗体位置,方便按下右上角还原按钮时将窗体设置在最大化前的位置。
部分代码如下:
  1. bool frmMain::eventFilter(QObject *obj, QEvent *event)
  2. {
  3.     if (event->type() == QEvent::MouseButtonDblClick) {
  4.         this->on_btnMenu_Max_clicked();
  5.         return true;
  6.     }
  7.     return QObject::eventFilter(obj, event);
  8. }
  9. void frmMain::mouseMoveEvent(QMouseEvent *e)
  10. {
  11.     if (mousePressed && (e->buttons() && Qt::LeftButton) && !max) {
  12.         this->move(e->globalPos() - mousePoint);
  13.         e->accept();
  14.     }
  15. }
  16. void frmMain::mousePressEvent(QMouseEvent *e)
  17. {
  18.     if (e->button() == Qt::LeftButton) {
  19.         mousePressed = true;
  20.         mousePoint = e->globalPos() - this->pos();
  21.         e->accept();
  22.     }
  23. }
  24. void frmMain::mouseReleaseEvent(QMouseEvent *)
  25. {
  26.     mousePressed = false;
  27. }

2:图形字体的使用

这里直接用的是网上的IconHelper类,也不知道最初作者是谁,反正代码也就几行,不难。
贴出CPP实现文件代码
  1. #include "iconhelper.h"
  2. IconHelper* IconHelper::_instance = 0;
  3. IconHelper::IconHelper(QObject*):
  4.     QObject(qApp)
  5. {
  6.     int fontId = QFontDatabase::addApplicationFont(":/image/fontawesome-webfont.ttf");
  7.     QString fontName = QFontDatabase::applicationFontFamilies(fontId).at(0);
  8.     iconFont = QFont(fontName);
  9. }
  10. void IconHelper::SetIcon(QLabel* lab, QChar c, int size)
  11. {
  12.     iconFont.setPointSize(size);
  13.     lab->setFont(iconFont);
  14.     lab->setText(c);
  15. }
  16. void IconHelper::SetIcon(QPushButton* btn, QChar c, int size)
  17. {
  18.     iconFont.setPointSize(size);
  19.     btn->setFont(iconFont);
  20.     btn->setText(c);
  21. }


在主窗体的构造函数中这样调用即可。
IconHelper::Instance()->SetIcon(ui->btnMenu_Close,QChar(0xf00d), 10);
右上角最大化按钮会有两个图标,最大化时候一个,还原时候一个,所以这里在事件中这样处理的。
  1. void frmMain::on_btnMenu_Max_clicked()
  2. {
  3.     if (max) {
  4.         this->setGeometry(location);
  5.         IconHelper::Instance()->SetIcon(ui->btnMenu_Max, QChar(0xf096), 10);
  6.         ui->btnMenu_Max->setToolTip("最大化");
  7.     } else {
  8.         location = this->geometry();
  9.         this->setGeometry(qApp->desktop()->availableGeometry());
  10.         IconHelper::Instance()->SetIcon(ui->btnMenu_Max, QChar(0xf079), 10);
  11.         ui->btnMenu_Max->setToolTip("还原");
  12.     }
  13.     max = !max;
  14. }



3:自定义弹出信息框、询问框、错误
我比较偷懒,直接用新建的UI窗体来实现,对信息框、询问框、错误框的判断直接在setmessage函数中处理。
  1. void frmMessageBox::SetMessage(const QString &msg, int type)
  2. {
  3.     if (type == 0) {
  4.         ui->labIcoMain->setStyleSheet("border-image: url(:/image/info.png);");
  5.         ui->btnCancel->setVisible(false);
  6.         ui->lab_Title->setText("提示");
  7.     } else if (type == 1) {
  8.         ui->labIcoMain->setStyleSheet("border-image: url(:/image/question.png);");
  9.         ui->lab_Title->setText("询问");
  10.     } else if (type == 2) {
  11.         ui->labIcoMain->setStyleSheet("border-image: url(:/image/error.png);");
  12.         ui->btnCancel->setVisible(false);
  13.         ui->lab_Title->setText("错误");
  14.     }
  15.     ui->labInfo->setText(msg);
  16. }



4:设置全局皮肤样式
  1. //设置皮肤样式
  2.     static void SetStyle(const QString &styleName)
  3.     {
  4.         QFile file(QString(":/image/%1.css").arg(styleName));
  5.         file.open(QFile::ReadOnly);
  6.         QString qss = QLatin1String(file.readAll());
  7.         qApp->setStyleSheet(qss);
  8.         qApp->setPalette(QPalette(QColor("#F0F0F0")));
  9.     }

myHelper::SetStyle("black");//黑色风格
myHelper::SetStyle("blue");//蓝色风格



myHelper::SetStyle("gray");//灰色风格


myHelper::SetStyle("navy");//天蓝色风格


特点:
1:无边框窗体,自定义标题栏,鼠标拖动,大小缩放,双击切换。
2:除了少量的几个图片资源外,几乎使用QSS写完所有颜色样式控制。
3:自定义一个QMessageBox对话框,自动换行显示提示信息,可以很方便的调用。
信息框:myHelper::ShowMessageBoxInfo
询问框:myHelper::ShowMessageBoxQuesion
错误框:myHelper::ShowMessageBoxError
4:使用fontawesome图形字体库,将互联网的优秀资源应用于QT中。
5:彻底公开源码,可以任意随意使用。
6QT各个版本都可以编译通过,亲测无误。
7:自带提供了四种样式黑色、蓝色、灰色、天蓝色风格供选择,可以自由更改image文件夹下的样式,也可以自己增加一些样式。
代码肯定还有很多不完善的地方,不能通用于任何项目,肯定需要修改不少代码才可以用于自己的项目,如果有更好的建议,非常欢迎提出来!
本站下载地址: QUI.zip (728 K) 下载次数:2650
13条评分好评度+2贡献值+2金钱+7威望+2
testuser007 金钱 +1 优秀文章,支持!n神马都是浮云 2017-10-09
永远姑娘 好评度 +1 - 2017-06-29
永远姑娘 贡献值 +1 - 2017-06-29
永远姑娘 威望 +1 - 2017-06-29
永远姑娘 金钱 +1 - 2017-06-29
hengli1982 金钱 +1 - 2017-05-18
xz199264 金钱 +1 很强大,谢谢! 2017-05-11
lin189242464 金钱 +1 - 2017-05-09
zoapk 好评度 +1 - 2017-02-11
zoapk 贡献值 +1 - 2017-02-11
12
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线liudianwu

只看该作者 1楼 发表于: 2014-08-15
信息框:myHelper::ShowMessageBoxInfo

询问框:myHelper::ShowMessageBoxQuesion

错误框:myHelper::ShowMessageBoxError
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线hitler++

只看该作者 2楼 发表于: 2014-08-16
你可以把你公司送出的那1000万元大礼打我账户上
离线morg

只看该作者 3楼 发表于: 2014-08-16
离线lawme

只看该作者 4楼 发表于: 2014-08-16

刘典武老师:

高端、大气、上档次的作品!

高端、大气、上档次的人品!

这辈子,你准能发达!
离线hp_201111

只看该作者 5楼 发表于: 2014-08-16
不错。 帮顶
离线lzh280

只看该作者 6楼 发表于: 2014-08-16
离线libaineu2004

只看该作者 7楼 发表于: 2014-08-16
楼主威武,请附上工程的完整代码吧!!谢谢!!
离线lano2088

只看该作者 8楼 发表于: 2014-08-17
离线stlcours

只看该作者 9楼 发表于: 2014-08-18
比较崇拜楼主,可以接这么多私活。可以透露一下吗,平均一个私活多少钱?
离线stlcours

只看该作者 10楼 发表于: 2014-08-18
奋斗的孩子做的换肤,应该是与平台无关的吧?只是他用VC做了这个工程而已,楼主怎么会这么不喜欢?

只看该作者 11楼 发表于: 2014-08-19
等我有时间了,给你们弄一个creator版本的,一直都不喜欢使用设计师,感觉手写起来比较爽。。。
博客地址:https://waleon.blog.csdn.net
微信公众号:高效程序员
QQ 群:242790253
微信群:加微信(iwaleon),邀请入群。

承接各种 C++/Qt/QML 项目,专业的团队,一流的服务,不二的选择!
离线gavial2011

只看该作者 12楼 发表于: 2014-08-19
谢谢啦~我倒是很喜欢designer~
离线liudianwu

只看该作者 13楼 发表于: 2014-08-19
回 奋斗ing孩子 的帖子
奋斗ing孩子:等我有时间了,给你们弄一个creator版本的,一直都不喜欢使用设计师,感觉手写起来比较爽。。。[表情]  (2014-08-19 09:48) 

嗯,也许工作环境不一样,要求使用的平台也不一样,我主要做嵌入式linux上的QT开发,用VC无能为力!呵呵!
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350

只看该作者 14楼 发表于: 2014-08-19
回 liudianwu 的帖子
liudianwu:嗯,也许工作环境不一样,要求使用的平台也不一样,我主要做嵌入式linux上的QT开发,用VC无能为力!呵呵! (2014-08-19 13:52) 

我是VS跟Creator都用,平时自己写代码基本都是VS,公司的项目开发都用的Creator!两个都挺喜欢的。。。
博客地址:https://waleon.blog.csdn.net
微信公众号:高效程序员
QQ 群:242790253
微信群:加微信(iwaleon),邀请入群。

承接各种 C++/Qt/QML 项目,专业的团队,一流的服务,不二的选择!
离线qqqwh

只看该作者 15楼 发表于: 2014-08-20
离线qhxnwrz

只看该作者 16楼 发表于: 2014-08-20
离线aimybbe

只看该作者 17楼 发表于: 2014-08-21
写的非常棒,我下载了你的程序,在菜单按钮上加了个Menu(setMenu)用来动态的改变样式,但是添加了按钮在setMenu之后会有一个倒着的小三角

把按钮上的ICON就不好看了,我查阅了Qt帮助手册不知道怎么把这个小三角去掉,使用如下的样式尝试
QPushButton#btnMenu::menu-indicator {

    subcontrol-position: center center;
    border:none;
}
能去掉但是菜单上的ICON就不是居中显示了,这个样式描述该怎么写呢?


还有一事,各位在写QSS的时候,每个样式的属性值在哪里查的呢?有没有官方的表或者什么的?







离线liudianwu

只看该作者 18楼 发表于: 2014-08-21
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线qibbs

只看该作者 19楼 发表于: 2014-08-21
不错不错!学习了!有时间我也要弄一套整体解决方案。
春梦觉来心自警,往事般般应。
离线denga188

只看该作者 20楼 发表于: 2014-08-21
楼主,心态很好,很多作品都支持开源,非常感谢,学习了。
离线aimybbe

只看该作者 21楼 发表于: 2014-08-21
回 aimybbe 的帖子
aimybbe:写的非常棒,我下载了你的程序,在菜单按钮上加了个Menu(setMenu)用来动态的改变样式,但是添加了按钮在setMenu之后会有一个倒着的小三角
[图片]
把按钮上的ICON就不好看了,我查阅了Qt帮助手册不知道怎么把这个小三角去掉,使用如下的样式尝试
QPushButton#btnMenu .. (2014-08-21 08:47)

解决了,还是初学思维受限制啊,只要将宽度设为0px就好了,呵呵!!!

QPushButton#btnMenu::menu-indicator {
    width:0px;
}
离线lingdhox

只看该作者 22楼 发表于: 2014-08-25
gui的皮肤是统一不了的. 美工分分钟爆掉.

工控, 企业之类的大概可以把
离线qq93247519

只看该作者 23楼 发表于: 2014-08-25
十分感谢楼主无私奉献
离线sinzqm

只看该作者 24楼 发表于: 2014-08-26
离线尚楠

只看该作者 25楼 发表于: 2014-08-27
,很赞,帮我解决了一个难题,谢谢
离线aweeew2008

只看该作者 26楼 发表于: 2014-08-30
谢谢分享,很值得学习i
离线superlazy

只看该作者 27楼 发表于: 2014-09-05
多谢了。
离线lb309925437

只看该作者 28楼 发表于: 2014-09-05
谢谢楼主分享!
个人网站    : www.thin3.com
CSDN博客: http://blog.csdn.net/lb1885727
离线crazy

只看该作者 29楼 发表于: 2014-09-05
不错,支持楼主,楼主的精神很值得传扬下去
C/C++/Qt爱好者
邮箱: kevinlq0912@163.com
公众号: devstone
博客:http://kevinlq.com/
离线crazy

只看该作者 30楼 发表于: 2014-09-05

你的压缩包不能打开,不知道是什么问题?楼主能发一份吗?多谢了。creazylq@163.com
C/C++/Qt爱好者
邮箱: kevinlq0912@163.com
公众号: devstone
博客:http://kevinlq.com/
离线行潇

只看该作者 31楼 发表于: 2014-09-09
回 liudianwu 的帖子
liudianwu:信息框:myHelper::ShowMessageBoxInfo
[图片]
询问框:myHelper::ShowMessageBoxQuesion
[图片]
错误框:myHelper::ShowMessageBoxError
....... (2014-08-15 21:05) 

不知道楼主有没有用Qt弄过注册机呢??
离线l769109884

只看该作者 32楼 发表于: 2014-09-10
我想知道一下,那个图形字体,不知道那个码值对应哪些图形,在哪里可以查看的
离线woniu600

只看该作者 33楼 发表于: 2014-09-14
通用的自定义窗口标题栏啊??
离线zhenonline

只看该作者 34楼 发表于: 2014-10-13
比较崇拜楼主
离线shannon

只看该作者 35楼 发表于: 2014-10-21
对于新手来说,崇拜!
离线912890618@qq

只看该作者 36楼 发表于: 2014-10-21
学习学习。
离线ajian1453

只看该作者 37楼 发表于: 2014-10-23
离线luorchid

只看该作者 38楼 发表于: 2014-10-25
离线yjwyky

只看该作者 39楼 发表于: 2014-10-26
感谢无私奉献!
快速回复
限100 字节
 
上一个 下一个