查看完整版本: [-- QT自定义精美换肤界面 --]

QTCN开发网 -> Qt 作品展 -> QT自定义精美换肤界面 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

<<   1   2  >>  Pages: ( 2 total )

liudianwu 2014-08-15 21:04

QT自定义精美换肤界面

陆陆续续用QT开发过很多项目，也用QT写过不少私活项目，也写过N个工具，一直梦寐以求能像VC一样可以很方便的有个自定义的界面，QSS的强大让我看到了很好的希望，辗转百度谷歌无数次，一直搜索QT相关的换肤文章，绝大部分的是一些简单的按钮文本样式，要做到整体换肤程度几乎不行，QTCN论坛里的奋斗的孩子写了个模仿360安全卫士系列，让我既惊喜有遗憾，惊喜的是能够用QT实现一个这么完整的360安全卫士界面，确实不错，也支持多种换肤，遗憾的是我下载过的是VC版本的，对于一直执着于用Qt Creator 来开发的我来说，不大喜欢，工程文件之多之复杂，对于追求精简美的我来说更是觉得别扭，当然源码学习参考价值还是很高的，只是个人不大喜欢而已。陆续看过slientman的QT整体换肤方案，链接地址：http://blog.csdn.net/slientman/article/details/5618950也从CSDN下过该可执行文件，也不知道是作者粗心还是故意，居然没有自带QT运行库，导致我电脑上试过几个版本的运行库都不行，作者也说了，花了很多精力，不打算开源，这个对于喜欢分享的我来说，心里又是一睹，不过本人还是带着诚意加过作者QQ，愿意自费购买一套，也一直没有得到作者的回复，有点失望。后面又在博客园里面看到24K纯开源（http://www.cnblogs.com/csuftzzk/）、文艺IT男（http://www.cnblogs.com/appsucc/）、liulun（http://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窗体打开需要给出返回值时，不能方便的提供done（1）这样的方法返回，后面索性抛弃了这种做法，还是采用QSS样式调用，相关样式都已经在样式表中写好，无非就五种颜色，采用了上下两种渐变颜色，normal两种,hover(select,focus等)两种，还有一个是文字颜色，只要将对应样式表替换这五种颜色即可，当然大部分时候替换的是四种颜色，文字颜色默认为白色，通用绝大部分渐变颜色。

核心处理部分：
1：无边框窗体处理
对标题栏安装eventFilter事件监听器监听鼠标双击事件，重载mouseMoveEvent、mousePressEvent、mouseReleaseEvent三个事件实现鼠标拖动，当窗体改变大小后还必须用QRect location;来记住当前窗体位置，方便按下右上角还原按钮时将窗体设置在最大化前的位置。
部分代码如下：
复制代码
  1. bool frmMain::eventFilter(QObject *obj, QEvent *event)
    {
        if (event->type() == QEvent::MouseButtonDblClick) {
            this->on_btnMenu_Max_clicked();
            return true;
        }
        return QObject::eventFilter(obj, event);
    }

    void frmMain::mouseMoveEvent(QMouseEvent *e)
    {
        if (mousePressed && (e->buttons() && Qt::LeftButton) && !max) {
            this->move(e->globalPos() - mousePoint);
            e->accept();
        }
    }

    void frmMain::mousePressEvent(QMouseEvent *e)
    {
        if (e->button() == Qt::LeftButton) {
            mousePressed = true;
            mousePoint = e->globalPos() - this->pos();
            e->accept();
        }
    }

    void frmMain::mouseReleaseEvent(QMouseEvent *)
    {
        mousePressed = false;
    }

2：图形字体的使用

这里直接用的是网上的IconHelper类，也不知道最初作者是谁，反正代码也就几行，不难。
贴出CPP实现文件代码
复制代码
  1. #include "iconhelper.h"

    IconHelper* IconHelper::_instance = 0;
    IconHelper::IconHelper(QObject*):
        QObject(qApp)
    {
        int fontId = QFontDatabase::addApplicationFont(":/image/fontawesome-webfont.ttf");
        QString fontName = QFontDatabase::applicationFontFamilies(fontId).at(0);
        iconFont = QFont(fontName);
    }

    void IconHelper::SetIcon(QLabel* lab, QChar c, int size)
    {
        iconFont.setPointSize(size);
        lab->setFont(iconFont);
        lab->setText(c);
    }

    void IconHelper::SetIcon(QPushButton* btn, QChar c, int size)
    {
        iconFont.setPointSize(size);
        btn->setFont(iconFont);
        btn->setText(c);
    }


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



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

        ui->labInfo->setText(msg);
    }



4：设置全局皮肤样式
复制代码
  1. //设置皮肤样式
        static void SetStyle(const QString &styleName)
        {
            QFile file(QString(":/image/%1.css").arg(styleName));
            file.open(QFile::ReadOnly);
            QString qss = QLatin1String(file.readAll());
            qApp->setStyleSheet(qss);
            qApp->setPalette(QPalette(QColor("#F0F0F0")));
        }

myHelper::SetStyle("black");//黑色风格
[attachment=12481]
myHelper::SetStyle("blue");//蓝色风格

[attachment=12482]

myHelper::SetStyle("gray");//灰色风格
[attachment=12483]

myHelper::SetStyle("navy");//天蓝色风格
[attachment=12484]

特点：
1：无边框窗体，自定义标题栏，鼠标拖动，大小缩放，双击切换。
2：除了少量的几个图片资源外，几乎使用QSS写完所有颜色样式控制。
3：自定义一个QMessageBox对话框，自动换行显示提示信息，可以很方便的调用。
信息框：myHelper::ShowMessageBoxInfo
询问框：myHelper::ShowMessageBoxQuesion
错误框：myHelper::ShowMessageBoxError
4：使用fontawesome图形字体库，将互联网的优秀资源应用于QT中。
5：彻底公开源码，可以任意随意使用。
6：QT各个版本都可以编译通过，亲测无误。
7：自带提供了四种样式黑色、蓝色、灰色、天蓝色风格供选择，可以自由更改image文件夹下的样式，也可以自己增加一些样式。
代码肯定还有很多不完善的地方，不能通用于任何项目，肯定需要修改不少代码才可以用于自己的项目，如果有更好的建议，非常欢迎提出来！
本站下载地址：[attachment=12486]

liudianwu 2014-08-15 21:05
信息框：myHelper::ShowMessageBoxInfo
[attachment=12487]
询问框：myHelper::ShowMessageBoxQuesion
[attachment=12489]
错误框：myHelper::ShowMessageBoxError
[attachment=12488]

hitler++ 2014-08-16 07:26
你可以把你公司送出的那1000万元大礼打我账户上

morg 2014-08-16 07:57

lawme 2014-08-16 08:56

刘典武老师：

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

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

这辈子，你准能发达！

hp_201111 2014-08-16 09:41
不错。 帮顶

lzh280 2014-08-16 10:52

libaineu2004 2014-08-16 18:54
楼主威武，请附上工程的完整代码吧！！谢谢！！

lano2088 2014-08-17 12:34

stlcours 2014-08-18 16:56
比较崇拜楼主，可以接这么多私活。可以透露一下吗，平均一个私活多少钱？

stlcours 2014-08-18 17:22
奋斗的孩子做的换肤，应该是与平台无关的吧？只是他用VC做了这个工程而已，楼主怎么会这么不喜欢？

一去丶二三里 2014-08-19 09:48
等我有时间了，给你们弄一个creator版本的，一直都不喜欢使用设计师，感觉手写起来比较爽。。。

gavial2011 2014-08-19 09:58
谢谢啦~我倒是很喜欢designer~

liudianwu 2014-08-19 13:52
奋斗ing孩子:等我有时间了，给你们弄一个creator版本的，一直都不喜欢使用设计师，感觉手写起来比较爽。。。[表情]  (2014-08-19 09:48) 

嗯，也许工作环境不一样，要求使用的平台也不一样，我主要做嵌入式linux上的QT开发，用VC无能为力！呵呵！

一去丶二三里 2014-08-19 16:05
liudianwu:嗯，也许工作环境不一样，要求使用的平台也不一样，我主要做嵌入式linux上的QT开发，用VC无能为力！呵呵！ (2014-08-19 13:52) 

我是VS跟Creator都用，平时自己写代码基本都是VS，公司的项目开发都用的Creator！两个都挺喜欢的。。。

qqqwh 2014-08-20 10:48

qhxnwrz 2014-08-20 11:34

aimybbe 2014-08-21 08:47
写的非常棒，我下载了你的程序，在菜单按钮上加了个Menu（setMenu）用来动态的改变样式，但是添加了按钮在setMenu之后会有一个倒着的小三角
[attachment=12503]
把按钮上的ICON就不好看了，我查阅了Qt帮助手册不知道怎么把这个小三角去掉，使用如下的样式尝试
QPushButton#btnMenu::menu-indicator {

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

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

liudianwu 2014-08-21 09:52
http://qt-project.org/doc/qt-4.8/stylesheet-examples.html#customizing-qscrollbar

qibbs 2014-08-21 10:29
不错不错！学习了！有时间我也要弄一套整体解决方案。

denga188 2014-08-21 12:34
楼主，心态很好，很多作品都支持开源，非常感谢，学习了。

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

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

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

lingdhox 2014-08-25 11:44
gui的皮肤是统一不了的. 美工分分钟爆掉.

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

qq93247519 2014-08-25 22:35
十分感谢楼主无私奉献

sinzqm 2014-08-26 16:08
赞

尚楠 2014-08-27 17:27
，很赞，帮我解决了一个难题，谢谢

aweeew2008 2014-08-30 22:25
谢谢分享，很值得学习i

superlazy 2014-09-05 14:20
多谢了。

lb309925437 2014-09-05 15:43
谢谢楼主分享！

crazy 2014-09-05 19:09
不错，支持楼主，楼主的精神很值得传扬下去

crazy 2014-09-05 19:14
[attachment=12568]
你的压缩包不能打开，不知道是什么问题？楼主能发一份吗？多谢了。creazylq@163.com

行潇 2014-09-09 15:12
liudianwu:信息框：myHelper::ShowMessageBoxInfo
[图片]
询问框：myHelper::ShowMessageBoxQuesion
[图片]
错误框：myHelper::ShowMessageBoxError
....... (2014-08-15 21:05) 

不知道楼主有没有用Qt弄过注册机呢？？

l769109884 2014-09-10 10:39
我想知道一下，那个图形字体，不知道那个码值对应哪些图形，在哪里可以查看的

woniu600 2014-09-14 17:47
通用的自定义窗口标题栏啊??

zhenonline 2014-10-13 11:04
比较崇拜楼主

shannon 2014-10-21 11:34
对于新手来说，崇拜！

912890618@qq 2014-10-21 16:31
学习学习。

ajian1453 2014-10-23 16:36

luorchid 2014-10-25 14:45

yjwyky 2014-10-26 10:11
感谢无私奉献！

crazy 2014-10-27 11:11

guzhengstar 2014-10-28 14:39
谢谢 很喜欢你的程序

似水流年 2014-11-04 14:31
一直想自己整理一套整体的换肤qss,没想到今天在这里看到前辈已经实现了，甚是高兴啊，感谢前辈的无私奉献。

彪炳千秋 2014-11-14 13:42
大气

weiweiqiao 2014-11-15 00:27


馒头小子 2014-11-16 11:31
为什么不能下载了啊

小缡绕谁前 2014-11-24 16:21
好东西，谢谢分享

llwj0303 2014-11-26 17:44
顶顶顶。很好的东西，学习了

bubble7733 2014-11-29 12:01
感谢楼主分享~
根据例子换个色系能很轻松的做出多种界面配色风格，赞！

s1021966769 2014-11-29 21:39
mark


查看完整版本: [-- QT自定义精美换肤界面 --] [-- top --]



Powered by phpwind v8.7 Code ©2003-2011 phpwind
Gzip disabled