Qt 暗夜黑主题教程（一） 创建带圆角和阴影的无边框窗口

创建项目

创建一个主窗口为 QWidget 类、带 UI样式表的项目。我的项目名叫 NightDark，窗口类名叫 Widget，刚入门的小白可以跟我命名保持一致方便学习，大佬自便。（不对，大佬怎么来光临我的教程了，请受我一拜）

完成创建后项目应该是这样子的：

去除边框

打开 widget.cpp，在构造函数 Widget::Widget(QWidget *parent) 中加入一句代码即可去除系统默认边框：

setWindowFlag(Qt::FramelessWindowHint);

此时 widget.cpp 中完整代码应该是这样的：

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    setWindowFlag(Qt::FramelessWindowHint);  //设置无边框样式
}

Widget::~Widget()
{
    delete ui;
}

运行效果如下：

编辑UI

双击 widget.ui 打开 UI 编辑器

在左侧组件库中选择 Containers 中的 Widget，拖入窗口中。右键新拖入的 Widget，修改组件名称为 shadowWidget（这个名字可以自己取）。然后右键 shadowWidget 以外的主窗口，选择 布局 - 水平布局（垂直布局也行）。

这样，shadowWidget 就会随着主窗口的大小变化而变化，默认与主窗口保持 9px 大小的边框。

右键 shadowWidget，选择 更改样式表…，在样式表对话框中输入：

background-color: rgb(57, 58, 60);
border-radius: 3px;

表示将背景颜色设置为 (57, 58, 60)，并设置大小为 3px 的圆角。

此时运行程序，我们会发现黑色窗口外面有一圈灰色的框。别急，这是我们预留来绘制阴影的区域。

透明背景

编辑完UI后，切换回 widget.cpp。

在构造函数 Widget::Widget(QWidget *parent) 中加入代码：

setAttribute(Qt::WA_TranslucentBackground);

这句代码是用来将窗口背景设置为全透明的。此时运行程序就会发现，刚才多出来的灰色边框被隐藏起来了。

添加阴影

这里将要用到两个头文件，需要填加在代码的开头。放在 widget.cpp 或 widget.h 里都可以：

#include <QColor>
#include <QGraphicsDropShadowEffect>

其中，QColor 用来生成颜色对象，QGraphicsDropShadowEffect 用来生成阴影效果对象。

然后，在构造函数 Widget::Widget(QWidget *parent) 中加入代码：

    QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect();   //创建阴影效果对象
    shadow->setBlurRadius(9);                       //设置阴影大小为9px
    shadow->setOffset(0);                           //设置阴影偏移距离为0px
    shadow->setColor(QColor(0, 0, 0, 100));         //设置阴影颜色为透明度为100的(0,0,0)(黑色)
    ui->shadowWidget->setGraphicsEffect(shadow);    //给shadowWidget窗口添加该阴影

到这里，阴影效果就成功地添加到窗口上了。运行效果如下：