Qt实现圆型控件的三种方法之设置样式表

news2024/11/26 14:33:37

前言

最近在研究绘制各种形状的控件，这里专门挑出圆形的控件进行记录，其它形状的也大差不差，会了圆形的之后其它的也类似。

正文

这里我挑出Label来进行举例。

通过设置样式表 (QSS)

这种方法简单且适用于不需要自定义绘制的场景。就是要注意：
border-radius要是正方形边长的一半
border-radius要是正方形边长的一半
border-radius要是正方形边长的一半
重要的事情说三遍
在这里插入图片描述
但是这样设置完有一个问题：当你通过样式表为控件添加背景图片时，会出现下面三种情况

默认情况下，QLabel 设置背景图片时，图片不会自动缩放或拉伸以适应 QLabel 的尺寸。如果图片的尺寸比 QLabel 小，那么图片将只覆盖QLabel的一部分，剩余的部分将重复显示。如果图片比 QLabel 大，图片将被裁剪以适应 QLabel 的尺寸，只显示图片的一部分。
这种缺点就是要图片尺寸和控件尺寸大小相等，限制非常大。

关于图片重复我们可以设置background-repeat: no-repeat; ，使其不重复
在这里插入图片描述
原本我想继续设置background-position来使得图片适应控件的大小，但是Qt5好像并不支持background-position，我尝试设置了好几次都没有效果

background-position: 控制图片在 QLabel 内的显示位置。

QLabel { background-image: url(:/images/background.png); background-position: center; }

background-size: 控制图片的缩放方式，可以设置为 cover 或 contain 以使图片适应 QLabel 的尺寸。
```
QLabel { background-image: url(:/images/background.png); background-size: cover; }
```
cover: 图片将被缩放以完全覆盖 QLabel，可能会裁剪掉图片的部分内容。
contain: 图片将被缩放以适应 QLabel，图片的全部内容会显示出来，但可能会留下一些空白区域。

在这里插入图片描述

上面说的都是通过设计师中设置样式表来进行处理，那么如果通过代码来实现

第一种：通过setpixmap设置控件上的图片

在这里插入图片描述

第二种通过setStylesheet设置控件上的图片

在这里插入图片描述

题外话

图片自适应控件

//添加背景图片
    QPixmap pixmap(":/images/face470.PNG");
    ui->label_3->setPixmap(pixmap);
    //图片缩放以填充图片
    //方法一：setScaledContents(true)
    ui->label_3->setScaledContents(true);
    //方法二：样式表中的 background-size,但是由于Qt5不支持，就不写了

    //方法三：使用QPixmap::scaled()方法手动缩放图片，然后将缩放后的图片设置到控件上。
    QPixmap scaledPixamp = pixmap.scaled(ui->label_2->size(),Qt::KeepAspectRatio);
    ui->label_2->setPixmap(scaledPixamp);

Qt::KeepAspectRatio：保持图片的宽高比，并调整其大小以适应控件。
Qt::IgnoreAspectRatio：忽略图片的宽高比，使其完全填充控件。
Qt::SmoothTransformation：启用抗锯齿以获得平滑的边缘。

控件自适应图片

//控件自适应图片
    //方法一：设置完图片后，用图片的尺寸再设置控件的大小
    ui->label_2->setPixmap(pixmap);
    ui->label_2->resize(pixmap.size());

    //方法二：使用setFixedSize()
    ui->label_2->setFixedSize(pixmap.size());