提要
窗口widget是无法直接通过样式表设置为圆角的,需要在窗口QWidget中拖入控件QFrame,将QFrame设置的和窗口QWidget一样大小,将窗口QWidget中需要的控件拖入到QFrame中。
示例
下面是一个提示工具的窗口。通过它简单的记录一下样式表怎么实现圆角窗口。
效果
没有很好的 剪裁,看其中的绿色窗口就行。
步骤
1.创建项目,打开ui文件,在ui文件中“排兵部阵”(在QWidget窗口上放置QFrame,在QFrame上放置自己需要的控件,将QWidget设置为透明,设置QFrame为圆角,并设置其背景色实现圆角窗口);
2.在qss文件中编写样式设置;
3.在ui文件对应的类构造函数中设置窗体的背景透明和无边框;
4.在项目中加载qss文件,一般在main函数。
就该项目本身而言:
1.新建文件后,打开ui文件,向其中拖入QFrame控件,将QFrame 和QWidget设置一样的大小,接下来向QFrame中拖入需要的控件,本例中由于只做提示,便只放了一个QLabel控件。
ui文件的对象类如下:
样式表
my.qss
/*提示工具*/
/*提示窗口的背景*/
QWidget#ToolTipForm
{background-color:transparent;
}/*提示窗口的frame*/
QWidget#ToolTipForm>QFrame#frame
{background-color:#aaff7f;border:none;border-radius:20px;
}/*标签*/
QFrame#frame>QLabel#label
{background-color:transparent;color:#ffffff;font:14px,"宋体";
}
样式表中设置了QWidget,QFrame,QLabel三个控件。这里有一个需要注意的:需要注意控件之间的父子关系。符号“>”代表直属子部件,说明两个控件之间是父子关系。“#”代表后面的字段是前面控件类型的名称,当然也可以省略控件类型直接写作#objectname这样,更多符号,这里不再记录。
qss文件编写完成之后,加入到项目的资源文件夹下,同样需要在创建资源文件的时候,添加前缀,然后再添加qss文件,保存。最后一步,在代码中将qss文件的内容加载进去。需要在main函数中编写,这样不管大的项目,都可通过一个qss文件加载整个项目的样式。这里不再提qss文件的加载,之前的qss相关介绍中有写,读者可以自行查阅。
这样还没有达到完全的圆角窗口,窗口存在圆角下面的黑色方角,最关键的一步:需要在该提示工具的窗口类的构造函数中加入窗口无标题栏和背景透明的设置。
setAttribute(Qt::WA_TranslucentBackground);//设置背景透明
setWindowFlags(Qt::WindowTransparentForInput | Qt::ToolTip | Qt::FramelessWindowHint);//窗口仅用于输出,不接收任何输入事件
上面只需setAttribute(Qt::WA_TranslucentBackground);和Qt::FramelessWindowHint的设置就好,作者的另两个参数是为了项目需要设置的不用加,便能实现想要的圆角窗口。
完整的代码如下:
tooltipform.h
#ifndef TOOLTIPFORM_H
#define TOOLTIPFORM_H#include <QWidget>/**********类功能描述:提示框***********/
namespace Ui {
class ToolTipForm;
}class ToolTipForm : public QWidget
{Q_OBJECTpublic:explicit ToolTipForm(QWidget *parent = nullptr);~ToolTipForm();void setToolTipInfo(QString &strTip);//设置窗口提示信息private:Ui::ToolTipForm *ui;
};#endif // TOOLTIPFORM_H
tooltipform.cpp
#include "tooltipform.h"
#include "ui_tooltipform.h"ToolTipForm::ToolTipForm(QWidget *parent) :QWidget(parent),ui(new Ui::ToolTipForm)
{ui->setupUi(this);//设置窗口为圆角必须设置背景透明和无边框setAttribute(Qt::WA_TranslucentBackground);//设置背景透明setWindowFlags(Qt::WindowTransparentForInput | Qt::ToolTip | Qt::FramelessWindowHint);//窗口仅用于输出,不接收任何输入事件
}ToolTipForm::~ToolTipForm()
{delete ui;
}void ToolTipForm::setToolTipInfo(QString &strTip)
{ui->label->setText(strTip);
}
上面代码中窗口属性的设置Qt::WindowTransparentForInput | Qt::ToolTip,只是项目需要,实现继承于QWidget的圆角窗口的时候,只需设置窗口无边框和背景透明:
setAttribute(Qt::WA_TranslucentBackground);
setWindowFlags(Qt::FramelessWindowHint);
要是没有setAttribute(Qt::WA_TranslucentBackground);设置窗口透明这句,便会出现下面的效果:
圆角窗口的圆角周围会出现黑色的直角。而设置窗口背景透明很好的解决了这个问题。