常用 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));