【QT入门】 无边框窗口设计之实现圆角窗口

本文介绍了如何在QT中实现无边框窗口的自定义标题栏,包括拖动和拉伸效果,以及两种方法实现圆角窗口:一是通过重写paintEvent绘制,二是使用QStyleOption和drawPrimitive。作者详细展示了代码示例和两种方法的差异。
摘要由CSDN通过智能技术生成

往期回顾:

【QT入门】对无边框窗口自定义标题栏并实现拖动和拉伸效果-CSDN博客

【QT入门】 自定义标题栏界面qss美化+按钮功能实现-CSDN博客

【QT入门】 无边框窗口设计之实现窗口阴影-CSDN博客

 【QT入门】 无边框窗口设计之实现圆角窗口

我们实际用到的很多窗口,其实都是带圆角的,所以这个知识点还是很有必要知道,有两种方法都可以实现圆角窗口,两个方法都需要重写void paintEvent(QPaintEvent* event) override。

一、最终效果

这里的效果用的是第二种,可以看到,左上角和右下角设置为了圆角,通过重写paintEvent方法我们可以实现精准控制哪个角设置为圆角,圆角半径为多大。
而如果是第一种,就是四个角都是圆角。

二、用Qt绘图框架绘制

1、初始化界面

void radius::initUIshang()
{
    resize(600, 400);

    setAttribute(Qt::WA_TranslucentBackground);  //设置窗口背景透明
    setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);  //去掉窗口边框
}

 主要是先设置窗口背景透明和去掉窗口边框,这个常规操作了

2、重写paintEvent方法

void radius::paintEvent(QPaintEvent * event)
{
    QPainter painter(this);// 创建一个QPainter对象并指定绘制设备为this,即当前窗口
    painter.setRenderHint(QPainter::Antialiasing);  // 设置绘制选项为反锯齿,使绘制的图形边缘更加平滑
    painter.setBrush(QBrush(QColor(255, 255, 255))); 设置画刷颜色,这里为白色
    painter.setPen(Qt::transparent); 设置画笔颜色为透明,即不绘制边框线
    QRect rect = this->rect(); 获取当前窗口的矩形区域
    painter.drawRoundedRect(rect, 15, 15);  // 绘制一个带有圆角的矩形窗口,圆角半径为15px,如果把窗口设置成正方形,圆角半径设大,就会变成一个圆了

}

 创建对象,设置了反锯齿效果,设置画笔画刷颜色等,最重要的,drawRoundedRect方法设置圆角半径。

2.1drawRoundedRect
painter.drawRoundedRect(rect, 15, 15) 

 这个方法三个参数:

矩形的位置和大小(rect)定义了矩形窗口的位置和大小,通常是一个矩形的边界框。
水平方向的圆角半径(15)定义水平方向的圆角半径,控制矩形窗口的左上角和右上角的圆角大小。
垂直方向的圆角半径(15)定义垂直方向的圆角半径,控制矩形窗口的左上角和左下角的圆角大小。

此时右下角的圆角大小会与左上角的圆角大小相同,而右上角和左下角的圆角大小也会相同。

我们这里将这两个圆角半径设置为相同的值,都为15,那么绘制的矩形窗口将具有相同大小的圆角,使得整个窗口看起来更加圆润。

 当圆角半径的值设置得足够大时,如果矩形窗口的宽度和高度相等,就会变成一个圆形窗口,因为圆角的半径大于矩形的宽度或高度,导致整个矩形都被圆角所覆盖,从而呈现出一个圆形。

三、用Qt绘图风格绘制 

1、初始化界面

void radius::initUIxia()
{
    setAttribute(Qt::WA_TranslucentBackground);  //设置窗口背景透明
    setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);  //去掉窗口边框

    //this->setStyleSheet("QWidget{background-color:#FFFFFF;border-radius:30px;}");
    this->setStyleSheet("QWidget{background-color:#FFFFFF;  \
        border-top-left-radius:15px;   \
        border-bottom-right-radius:15px; \
        }");
}

在初始化界面设置样式的时候,就可以指定哪个角设置为圆角,以及圆角半径大小。这里只设置了左上角和右下角。

左上角border-top-left-radius : 15px
右上角 border-top-right-radius: 15px;
左下角border-bottom-left-radius :5px;
右下角border-bottom-right-radius:5px;
border-radius的参数设置:
(1)可以只传一个参数,这样x, y方向的圆度是一样的,例如border-radius: 30px
(2)传两个参数  border-radius: 15px 20px  第一个参数设置X轴方向的半径,第二个参数设置Y轴方向的半径 

2、重写paintEvent方法

void radius::paintEvent(QPaintEvent*)
{
    QStyleOption opt;  // 创建一个QStyleOption对象
    opt.init(this);// 初始化QStyleOption对象,传入当前窗口指针
    QPainter p(this);// 创建一个QPainter对象,绘制设备为当前窗口

    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);// 使用当前窗口的绘图风格绘制小部件

}
 2.1QStyleOption

QStyleOption是Qt中用于传递样式选项的类,它在绘制控件时起着重要的作用。QStyleOption类提供了各种属性和方法,用于描述控件的外观和状态,以便样式系统能够正确地绘制控件。

其常见作用如下:

1、描述控件的状态QStyleOption可以描述控件的各种状态,如悬停、按下、选中等状态,以便样式系统能够根据状态来绘制控件。
2、传递控件的尺寸和位置QStyleOption可以包含控件的几何信息,如位置、大小、边界框等,以便样式系统能够根据几何信息来绘制控件。
3、传递控件的内容和文本QStyleOption可以包含控件的文本、图标等内容信息,以便样式系统能够在绘制时考虑内容的布局和显示。
4、传递用户定义的属性可以通过QStyleOption的扩展属性来传递自定义的属性信息,以便在绘制时能够根据这些属性做出相应的处理。
2.2drawPrimitive

drawPrimitive方法的四个参数也需要介绍一下(QStyle::PE_Widget, &opt, &p, this) 

1、QStyle::PrimitiveElement 类型的枚举值表示要绘制的元素类型

2、QStyleOption 类型的指针

表示绘制元素的选项
3、QPainter 类型的指针表示绘制的目标设备
4、QWidget 类型的指针表示与绘制相关联的小部件

从效果上来说,两个都是一样的,第二种方式可以实现更精细化的控制,因为四个角哪个用圆角哪个用平角都可以设置。

都看到这里了,点个赞再走呗朋友~

加油吧,预祝大家变得更强!

  • 32
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值