前言
最近在为学校开发一个成绩预览以及打印系统的客户端版本,应用到了Qt框架进行UI的开发,Qt框架中有一个相对完善的QSS(Qt Style Sheet)样式表,可相较于于Web开发端的CSS样式表来说,对于UI效果的支持有一定程度上的不完善,例如CSS中实用的box-shadow,text-shadow这两种阴影效果在QSS中是不可用的,但是阴影效果在大部分UI设计中都是提升用户体验的重要工具,所以在开发中查阅了部分相关资料寻找出了一种可行的方式实现了窗口阴影的效果,写篇博文为大家展示一下,互相交流,也帮助需要用到这个效果的同行小伙伴们达成需求~
一、实现方式
#include <QGraphicsEffect>
/// 方法封装了QGraphicsDropShadowEffect类,用来为QWidget绘制边框阴影
QGraphicsDropShadowEffect* CommonDrawAction::DrawShadow(QWidget* parent, qint32 offx, qint32 offy, qint32 blurRadius, QColor color){
QGraphicsDropShadowEffect *shadowEffect = new QGraphicsDropShadowEffect(parent);
shadowEffect->setOffset(offx, offy);
shadowEffect->setBlurRadius(blurRadius);
shadowEffect->setColor(color);
return shadowEffect;
}
......
/// 对需要阴影的Frame绘制过程的封装
Frame::Frame(QWidget* parent, QString frameName, QRect size, bool isDrawShadow)
{
QFrame *frame = new QFrame(parent);
frame->setObjectName(frameName);
frame->setGeometry(size);
frame->setFrameShape(QFrame::StyledPanel);
if(isDrawShadow == true){ //这里是绘制阴影的过程
CommonDrawAction draw; //实例化绘制对象
frame->setGraphicsEffect(draw.DrawShadow(parent, 0, 0, 10, Qt::black));
//调用绘制对象的DrawShadow方法进行阴影绘制
}
}
二、使用步骤
1.阴影对象实例化
首先我们需要引入QGraphicsEffect这个头文件,这是Qt中有关UI视效的类声明,该文件中存放着QGraphicsDropShadowEffect类的声明,这个类是我们用于绘制阴影的类,我个人认为该类的原理是在目标窗口的父窗口上绘制一个与窗口大小相同的阴影。
QGraphicsDropShadowEffect的实例化需要在构造方法中传入一个父窗口指针,同时需要四个参数(或三个参数)对其对象进行设置,通过对这些参数的设置实现不同的阴影效果。
qreal blurRadius() const :阴影模糊参数
QColor color() const :阴影颜色
QPointF offset() const :阴影偏移参数
qreal xOffset() const :阴影在x轴上的偏移参数
qreal yOffset() cons :阴影在y轴上的偏移参数:
代码如下:
#include <QGraphicsEffect>
......
QGraphicsDropShadowEffect *shadowEffect = new QGraphicsDropShadowEffect(parent);
shadowEffect->setOffset(offx, offy);
//shadowEffect->setOffset(QPointF(offx,offy)); //或者使用QPointF设置偏移参数
shadowEffect->setBlurRadius(blurRadius);
shadowEffect->setColor(color);
......
2.为目标窗口设置显示效果
代码如下:
......
QWidget *widget = new Widget(parent);
widget.setGraphicsEffect(shadowEffect);