Qt实现阴影窗口.docx

上下求索我一直在寻找。 新浪微博: /u/1777570591 /u/24032746102010-12-23 20:25QT实现阴影窗口（一） QT的窗口对于一般的窗口程序来说，已经完全够用了。但有时候我们要求界面比较精美，或者还想自定义皮肤之类的话，就需要自己定义窗口。这里介绍一种简单的自定义窗口的方法。 自定义样式可以达到很多的自定义皮肤的效果，但自定义样式有时不能指定窗口的形状，或者实现窗口的阴影效果（使用QT的QGraphicsEffect定义阴影，但运行效率较低）。这样的话可以重载窗口的paintEvent函数实现自绘制窗口。 先准备一张有窗口阴影的背景图，然后在paintEvent函数里面使用QPainterx绘制这张图。 这里将窗口类命名为GraphicDialog 示例代码如下： class GraphicDialog : public QDialog public: GraphicDialog(QWidget* parent = NULL, Qt:WindowFlags f = 0/* Qt:FramelessWindowHint*/); GraphicDialog(void); protected: void paintEvent(QPaintEvent *); QPixmap background; ;在窗口类构造函数中： setWindowFlags(Qt:FramelessWindowHint);/无标题窗口setAttribute(Qt:WA_TranslucentBackground); background.load(:/Images/DialogBackground); 在paintEvent中 QPainter p(this);p.drawPixmap(0, 0, rect().width(), rect().height(), background);实现效果如图： 这是实现的第一步，但这时窗口是无法用鼠标拖动的，而且也没有最大化、最小化、关闭等按钮了，因为这是一个无标题窗口。更详细的实现将在下一篇进行分享。QT实现阴影窗口（二） 从上一篇的效果可以看到窗口并不美观，而且不能用鼠标进行拖动，还不可以实现最大最小化。 要实现用鼠标拖动可以，重载鼠标点击和鼠标移动事件的处理，具体如下： /GraphicDialog.h protected: void mousePressEvent(QMouseEvent *) void mouseMoveEvent(QMouseEvent* ); private:QPoint last;/保存鼠标按下的位置 /GraphicDialog.cpp void GraphicDialog:mousePressEvent(QMouseEvent *e) last = e-globalPos(); void GraphicDialog:mouseMoveEvent(QMouseEvent *e) if(e-buttons()= Qt:LeftButton)QPoint newpos = e-globalPos();QPoint upleft = mapToParent(newpos - last); /计算距原位置的偏移move(upleft);last = newpos;/更新原位置到最新的位置 这时已经可以用鼠标手动窗口到任意位置。QT实现阴影窗口（三） 上一篇讲到了实现用拖动窗口，这篇分享一下实现最大化，最小化窗口。 一般的窗口都有最大化最小化功能，在WINDOWS系统下，在窗口右上角有相应的按钮，而在MAC系统，相应的按钮是在左上角的。现在我们的窗口是没有最小化最小化和关闭按钮的，要关闭窗口只能用Alt + F4或Esc键。 这里实现一个最大化，最小化和关闭窗口按钮的部件来代替标准窗口的窗口控制按钮，实现如下：/WindowControl.hclass WindowControl :public QWidgetpublic:/.QPushButton* minButton;QPushButton* maxButton;QPushButton* closeButton;QHBoxLayout* layout;QWidget*buttonWidget;/WindowControl.cpp构造函数里面 layout-setContentsMargins(1, 0, 1, 2); layout-setSpacing(1); /控件背景 buttonWidget = new QWidget(this); buttonWidget-setStyleSheet(WINDOW_CONTROL_STYLE.arg(:/Images/WindowControlBackground); /最小化按钮 minButton = new QPushButton(this); minButton-setFocusPolicy(Qt:NoFocus); minButton-setText(); /为了跟标准窗口一样的效果，我为这三个按钮提示了不同状态时的样式。 minButton-setStyleSheet(BUTTON_STYLE.arg(:/Images/WindowControlMinNormal).arg(:/Images/WindowControlMinHover).arg (:/Images/WindowControlMinPressed); /minButton-resize(15, 17); minButton-setMaximumSize(24, 17); /.其他按钮类似layout-addWidget(minButton); layout-addWidget(maxButton); layout-addWidget(closeButton); buttonWidget-setLayout(layout); outLayout-addWidget(buttonWidget); 然后在窗口类里加入WindowControl* winControl; 重载大小改变事件，以使得窗口大小变化时，最大化等按钮能显示在正常的位置 void GraphicDialog:resizeEvent(QResizeEvent *) winControl-setGeometry(this-width() - 93 - 6 - 19 - 21, 19, 93, 19); 这里可以看到右上角像标准窗口一样的效果，但还没有实现最大化和最小化等功能，还有窗口非常地难看，因为窗口的大小大于背景图的大小，被拉伸了，下篇将分享如何解决这个问题以及最大化最小化。QT实现阴影窗口（四） 从上一篇的效果图可以看到，窗口背景被拉伸得非常厉害，如果我们想用任意的图片当背景的话，那现在的方法肯定是不可以的，因为现在图片是拉伸至整个窗口的。那么应该怎么做呢？ 了解了QT的样式的实现的话，那么可以知道它是用九宫格来分割图片的，这里我就是使用九宫分割的思想来画我们的背景。如图所示： 我把图片分成9个区域，如上图，在画图的时候，保持1、3、7、9四个区域跟原图的尺度保持一至，而把2、8区域进行横向拉伸、4、6区域进行竖向拉伸，第5个区域横向和竖向都拉伸。实现代码如下#define BORDER_TOP 55#define BORDER_RIGHT 26#define BORDER_BOTTOM 23#define BORDER_LEFT 23titleHeight = BORDER_TOP; /标题栏的高度的paintEvent中：QPainter painter(this);/画左上角painter.drawPixmap(QPoint(0,0),background,QRect(0, 0, BORDER_LEFT, titleHeight);/画顶部painter.drawPixmap(QRect(BORDER_LEFT, 0, this-width()-BORDER_RIGHT-BORDER_LEFT, titleHeight),background,QRect(BORDER_LEFT, 0, background.width()-BORDER_RIGHT-BORDER_LEFT, titleHeight);/画右上部分painter.drawPixmap(QPoint(this-width()-BORDER_RIGHT, 0),background,QRect(background.width()-BORDER_RIGHT, 0, BORDER_RIGHT, titleHeight);/画左下部分painter.drawPixmap(QPoint(0,this-height()-BORDER_BOTTOM),background,QRect(0, background.height()-BORDER_BOTTOM, BORDER_LEFT, BORDER_BOTTOM);/画底部分painter.drawPixmap(QRect(BORDER_LEFT, this-height()-BORDER_BOTTOM, this-width()-BORDER_RIGHT-BORDER_LEFT, BORDER_BOTTOM),background,QRect(BORDER_LEFT, background.height()-BORDER_BOTTOM, background.width()-BORDER_RIGHT-BORDER_LEFT, BORDER_BOTTOM);/画右下部分painter.drawPixmap(QPoint(this-width()-BORDER_RIGHT, this-height()-BORDER_BOTTOM),background,QRect(background.width()-BORDER_RIGHT, background.height()-BORDER_BOTTOM, BORDER_RIGHT, BORDER_BOTTOM);/画左部分painter.drawPixmap(QRect(0, titleHeight, BORDER_LEFT, this-height()-BORDER_BOTTOM-titleHeight),background,QRect(0, titleHeight, BORDER_LEFT, background.height()-BORDER_BOTTOM-titleHeight);/画右部分painter.drawPixmap(QRect(this-width()-BORDER_RIGHT, titleHeight, BORDER_LEFT, this-height()-BORDER_BOTTOM-titleHeight),background,QRect(background.width()-BORDER_RIGHT, titleHeight, BORDER_LEFT, background.height()-BORDER_BOTTOM-titleHeight);/画中间部分painter.drawPixmap(QRect(BORDER_LEFT, BORDER_TOP, this-width()-BORDER_R