无标题栏的纯色背景窗口
通过设置setWindowFlags(Qt::FramelessWindowHint); 可以给窗口设置不显示标题栏,但是这样去掉标题栏后,窗口也没有阴影,在白色背景下,窗口不好识别,
如下是通过改变样式表,把窗口的背景改为纯白色
设置样式表,通过#选择器指定窗口变量名Widget的背景颜色纯白:
#Widget{
background-color: #ffffff;
}
如下:
然后再widget.cpp中设置窗口不显示标题栏:
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
setWindowFlag(Qt::FramelessWindowHint);
}
效果如下,可以看出,在浅色背景下,窗口是不易被识别的:
这就需要给窗口添加阴影效果。
给单个的纯色无边框窗口设置阴影效果
窗口添加阴影效果可以使用 QGraphicsDropShadowEffect 这个类,通过创建一个类实例,然后指定阴影颜色,和阴影边角半径,偏移量等:然后把阴影应用到widget上,如下创建一个黑色的阴影图形,应用到widget:
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
setWindowFlag(Qt::FramelessWindowHint);
// setAttribute(Qt::WA_TranslucentBackground);
QGraphicsDropShadowEffect *shadow_effect = new QGraphicsDropShadowEffect(this);
shadow_effect->setOffset(0);
shadow_effect->setColor(QColor(QStringLiteral("black")));
shadow_effect->setBlurRadius(5);
this->setGraphicsEffect(shadow_effect);
}
可以看到,整体的窗口都被阴影覆盖了。也就是说如果只是给widget增加阴影效果是无法单独实现窗口背后的阴影效果的,但是可以使用widget窗口为基底,然后在在上层添加一个sub_widget或者是sub_frame,只要给sub_widget或者sub_frame留有足够的边距,就可以使得阴影效果凸显出来
嵌套Widget或者Frame实现阴影效果
整体思路如下:
- 在widget之上嵌套QFrame或者是Widget,所有的控件布局摆放都在其那套的内部widget或者是QFrame中;
- 创建阴影效果,然后给内部嵌套的inner_widget或者inner_frame设置上;
- 【重要】设置内部嵌套的窗口的背景样式,如设置背景为白色setStyleSheet(“*{background-color:#ffffff;}”);
- 把基底的widget设置为透明;
如下是在主窗口widget嵌套Frame实现的阴影效果的UI排布:
cpp代码如下:
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
setWindowFlag(Qt::FramelessWindowHint);
QGraphicsDropShadowEffect *shadow_effect = new QGraphicsDropShadowEffect(this);
shadow_effect->setOffset(0);
shadow_effect->setColor(QColor(QStringLiteral("black")));
shadow_effect->setBlurRadius(10);
//设置widget透明
this->setAttribute(Qt::WA_TranslucentBackground);
//设置嵌套的frame背景色,是为了能够在widget的透明背景下凸显出来
ui->frame->setStyleSheet("*{background-color:#ffffff;}");
ui->frame->setGraphicsEffect(shadow_effect);
}
效果:
因为主要凸显出来的是嵌套的Frame(也可以使用widget替代),所以一些详细的空间布局在嵌套的Frame上进行。
如下是实现的一个模拟QQ登录的无标题主窗口效果,其label和lineedit等口控件均是在内部嵌套的Frame中布局的: