Qt美化

最近由于产品的需求，开始对Qt界面做一些美化。Qt在界面的美化方面提供了很多方法，实现容易，效果不错，可以很炫，可以很华丽，可以简洁高雅......

    QT本身提供了多种外观样式设计的方法，能做些什么就要看你的想象力了。如QT样式表，一种从CSS得到的灵感，还有另一种就是利用QGraphicsView/QGraphics Scene/QGraphics Item这种框架来绘制的程序界面。还有QStyle，它达到的效果确实是立竿见影，不会让你的程序有涅磐般的感觉。

    下面是这次做的几个例子。只用到上面所说的QT样式表，即stylesheet。

    （1）单纯渐变。如果把渐变的中间颜色改成浅一点的颜色会更好看。

    （2）基于一些灵感，做了一个30%透明的界面。




    改变一下桌面壁纸看看。






    （3）这个修改了一下logo的实现。

    下面说一下实现方法：（建议装 Qt Creator）

    （1）对于第一幅图，两个步骤：去除边框，渐变。

去除边框：

    在类定义的构造函数中添加一下语句。

    setWindowOpacity(1);

    setWindowFlags(Qt::FramelessWindowHint);

setAttribute(Qt::WA_TranslucentBackground);     具体为什么查查API就行了。
渐变：

    重载paintEvent函数。

    在头文件添加：

protected:

void
paintEvent ( QPaintEvent
*);
    在源文件定义该方法： void
Widget::paintEvent(QPaintEvent
*){
QPainter
painter(this);
painter.setRenderHints(QPainter::Antialiasing|QPainter::HighQualityAntialiasing);
painter.save();
painter.setPen(Qt::NoPen);
QLinearGradient
BgGradient(QPoint(0,0),QPoint(0,height()));
BgGradient.setColorAt(0.0,m_LG.GetEndColor(m_BgClr));
BgGradient.setColorAt(0.1,m_LG.GetStartColor(m_BgClr));
BgGradient.setColorAt(0.9,m_LG.GetStartColor(m_BgClr));
BgGradient.setColorAt(1.0,m_LG.GetEndColor(m_BgClr)
);
painter.setBrush(BgGradient);
QRectF
ThisRect(0,0,m_Width,m_Height);
painter.drawRoundedRect(ThisRect,14,14);
painter.restore();
painter.save();
QFont
TextFont;
TextFont.setBold(true);
painter.setFont(TextFont);
painter.setPen(Qt::black);
painter.drawText(m_TitleRect,m_strTitle,Qt::AlignVCenter|Qt::AlignLeft);
painter.restore();}    里面的 m_LG 是自己写的一个类，8~11所用的关于这个类的方法都是返回一个颜色值QColor，所以自己选一种颜色替代即可。    最后编译一下即可。    你会发现界面移动不了，那是因为刚才去除边框所引起的，需要重载一下三个方法：在头文件中：protected:
void
mousePressEvent(QMouseEvent
*);
void
mouseReleaseEvent(QMouseEvent
*);
void
mouseMoveEvent(QMouseEvent
*);在源文件中： void
Widget::mousePressEvent(QMouseEvent
*e){
if(e->buttons()
&
Qt::LeftButton)
{
m_bPressed
=
true;
m_lastPot
=
e->pos();
}}void
Widget::mouseMoveEvent(QMouseEvent
*e){
if(m_bPressed)
{
QPoint
MovePot
=
e->globalPos()
-
m_lastPot;
move(MovePot);
}}void
Widget::mouseReleaseEvent(QMouseEvent
*e){
Q_UNUSED(e);
m_bPressed
=
false;}     其中两个变量在头文件中定义：
QPoint
m_lastPot;
bool
m_bPressed;
    然后如何关闭呢？自己弄个QLabel或QPushbutton，改下背景，写下它的槽就行了。在槽里面用close（）就行了，当然可以做多一些其它的事情。

如此即可实现第一幅图。
    （2）对于第二、三幅图：同样去除边框，再修改一下主界面对象的stylesheet属性。    去除边框同上，stylesheet属性在Qt Creator的属性栏中即可选择，弹出一下对话框，每个选择的下拉框有多种功能可选。


background-image按像素显示图片，或者border-image可根据窗体大小来自动缩放图片。    背景图片可以自己ps做张png格式的图片。


    基本的界面有三种：mainwindow、dialog和widget。如果在mainwindow、dialog中进行以上操作可以实现效果。在widget中，你会发现，用同样的方法，背景并没有发生改变，而仅仅是它的子窗体背景图片发生了改变。在widget里面添加frame之后再修改frame的属性吧。    如此之后再添加其它组件时会发现，子窗体继承父窗体的属性，也就是说，父窗体的背景，在子窗体中也会有，那如何让子窗体不继承父窗体的背景呢？    参考一下这个：#desktop { border-image: url(:/images/desktop.jpg);
}
#desktop * {
border-image: url();
} desktop是你的窗体对象名。看到第二句的*号就可以猜出为什么了。
（3）第四幅图只是修改一下那个logo，改为用QLabel或QPushbutton实现，这样就不用在图片中去测和实现它的位置，并修改了一下透明度。
    上面的几幅图的黑色边界是png图本身的，看下以下整体的效果。




    以下这个是之前参加博创杯的作品界面：