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

往期回顾：

【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 类型的指针	表示与绘制相关联的小部件

---

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

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

加油吧，预祝大家变得更强！