Loading

常用 QT 样式与方法(按钮悬浮变色,渐变色等)

主要用于记录自己常用的方法

1 QSS 按钮悬浮效果

类似于企业微信等,鼠标悬浮在某按钮上,按钮会改变背景色来达到告知用户 "选中" 的效果,如下图所示:

可以看到其实是 background 有一个浅灰色,同理,我们可以在 hover 的时候改变按钮的 background 如企业微信这样的作法,或者更改按钮文字颜色。

主要使用的 QT 函数,示例如下:

// 通过更改按钮的 QSS 属性可以很容易达到目的
// QPushButton:hover 按钮的悬浮属性
// color: 后面要加 # 号,是因为是十六进制(更改文字颜色,或使用 background 更改背景色)
// QColor(x).lighter(y) 是指将 x 颜色变浅 y 度,同理可以使用 QColor(x).darker(y) 是指把颜色变深 y 度
this->setStyleSheet(QString("QPushButton:hover {"
                        "color: #%1"
                        "}").arg(QString::number(QColor("#D70A2A").lighter(80).rgb(), 16));

2 QSS 控件渐变色

更改按钮的 QSS 属性可以很容易达到此目的

此处我们设置按钮的背景色为横向渐变,示例如下:

// (x1, y1, x2, y2)表示颜色渐变的方向
// x1 = 0,x2 = 1(沿水平方向渐变),y1 = 0,y2 = 0(垂直方向不变)
// stop 表示位置(0-1)
// 颜色可以用 RGB 或者 rgba,如 rgba(0, 0, 255, 0.5),颜色 (0, 0, 255)和透明度(0.2),透明度范围 0-1
this->setStyleSheet("QPushButton{"
                     "background: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 #497BF0,stop:1 #1FB6F6)"
                     "}");

效果图:

3 布局常用函数

// 从父窗体的(0,0)位置开始(即为最左上角的点),显示一个宽w*高h的控件
QWidget::setGeometry(int x, int y, int w, int h)

// 设置 x 像素的文本缩进
QLabel::setIndent(int x)

// 设置边距(左上右下都为同一个值)
void setMargin(int);  
// 单独设置左上右下的边距
void setContentsMargins(int left, int top, int right, int bottom);  
// 设置所有控件的间隔大小    
void setSpacing(int);    
// 设置控件的对齐方式
bool setAlignment(QWidget *w, Qt::Alignment alignment);  
// 设置布局的对齐方式           
bool setAlignment(QLayout *l, Qt::Alignment alignment);             

// 添加间隔大小
void addSpacing(int size);      
// 添加控件大小比例(将空白没有 widget 的地方均分成 9 分,然后按照参数的大小分配弹簧)   
void addStretch(int stretch = 0);  

// 构造具有首选宽度 w、首选高度 h、水平大小策略 hPolicy 和垂直大小策略 vPolicy 的弹簧
QSpacerItem::QSpacerItem(int w, int h, QSizePolicy::Policy hPolicy = QSizePolicy::Minimum, QSizePolicy::Policy vPolicy = QSizePolicy::Minimum) 

// 添加弹簧
void addSpacerItem(QSpacerItem *spacerItem);         

// 添加普通控件
void addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = Qt::Alignment()); 
// 添加子布局
void addLayout(QLayout *layout, int stretch = 0);    

4 QT 阴影类 - QGraphicsDropShadowEffect

需要注意的点:

1、如果对父类使用了该类,那么子类也会继承

2、添加阴影,要保证该控件周围有 margin,不然不会渲染(没空间怎么渲染呢?对吧)

示例代码,如下所示:

QGraphicsDropShadowEffect *shadow_effect = new QGraphicsDropShadowEffect(this);
// 设置阴影偏移量,x 轴方向和 y 轴方向
shadow_effect->setOffset(0, 0);
// 阴影颜色,QColor 属性。默认情况为半透明的深灰色(QColor(63, 63, 63,180))
shadow_effect->setColor(Qt::red);
// 阴影半径。使用较小的半径产生更清晰的阴影,而使用较大的半径产生更模糊的阴影
shadow_effect->setBlurRadius(20);

// 设置阴影
m_pLoginPhoneLabel->setGraphicsEffect(shadow_effect);

效果图:

5 QLabel 图片上显示文字

效果图:

示例代码:

m_TipsLabel = new QLabel(PAGE_LOGIN_QRCODE, widgetMain);

// 因为直接设置 Qt::AlignCenter 文字不在图片中间,所以只设置纵向居中,横向用 setIndent 控制(和你的图片有关)
m_TipsLabel->setIndent(18);
m_TipsLabel->setAlignment(Qt::AlignVCenter);

// border-image 会自适应图片,background-image 不会
m_TipsLabel->setStyleSheet(QString("border: none;"
                                   "border-image: url(%1);"
                                   "color: white;").arg(RES_LOGIN_TAB_MSG));
posted @ 2023-07-05 13:59  她爱喝水  阅读(470)  评论(0编辑  收藏  举报