qt使用样式表设置窗口widget无边框的情况下为圆角

本文介绍了如何在Qt中通过QSS和窗口属性设置创建无边框且具有圆角的透明窗口。关键步骤包括在UI中放置QFrame作为背景,设置QFrame为圆角并透明,以及在代码中设置窗口透明和无边框。同时提供了具体的QSS样式和代码示例。
摘要由CSDN通过智能技术生成

提要

窗口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_OBJECT

public:
    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);设置窗口透明这句,便会出现下面的效果:
在这里插入图片描述
圆角窗口的圆角周围会出现黑色的直角。而设置窗口背景透明很好的解决了这个问题。

  • 13
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肩上风骋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值