QT控件样式系列（二）之QPushButton/QToolButton

系列文章目录

QT控件样式系列（一）之QSlider

---

---

前言

本篇主要讲解 QPushButton 和 QToolButton 的样式和使用

---

一、样式表

QPushButton 和 QToolButton 的样式通用的，主要如下，感觉直接贴图就行了，其他属性没用

/*按钮背景图片*/
QPushButton
{
	/*剩下字体，按钮宽高根据需要设置*/
	border-image:url(:/images/Button/pushbtn.png); 
}

/*鼠标悬浮时背景图片*/
QPushButton:hover
{
	border-image: url(:/images/Button/pushbtn2.png);
}

/*鼠标点击时背景图片*/
QPushButton:pressed
{
	border-image: url(:/images/Button/pushbtn3.png);
	padding-left:3px;	/*如果按钮有文字，则点击时文字向右下角偏移3px*/
	padding-top:3px;
}

/*按钮选中时背景图片*/
QPushButton:checked
{
	border-image: url(:/images/Button/pushbtn4.png);
}

/*按钮禁用时背景图片，等价于!enabled*/
QPushButton:disabled
{
	border-image: url(:/images/Button/pushbtn5.png);
}

二、相关应用

1. 场景一

最近开发过程中，需要设计自定义形状按钮，通过使用 png 透明格式图片贴图，也能实现该功能；但是有个问题，看图说话

当鼠标点击按钮背景透明区域时，按钮也能响应，显然不符合需求，需要做如下处理，通过mask获取自定义形状按钮的有效区域

QPixmap pixmap(qstrImgPath);	// 读入图片
pBtn->resize(pixmap.size());	// 设置按钮大小和图片大小一致
pBtn->setMask(QBitmap(pixmap.mask()));	// 将图片转成1或0的位图，可见区域对应1，透明区域未0，通过设置Mask，可屏蔽可见区域以外的鼠标响应事件

2. 场景二

QToolButton 设置图标 ico 位置居左/置顶；虽然 QPushButton 也能设置图标 ico（默认居中），但是不能设置其位置

3. 场景三

QPushButton 和 QToolButton 有时需要设置可选中，如下图所示，勾选属性checkable

多个按钮可选时，需要设置独占（同时只能选中一个），有两种方式：勾选属性 autoExclusive 和 添加到按钮组，如下图所示

但是勾选之后不能取消勾选，需要独占的同时并取消勾选可以参考我这篇博客：QT 按钮单选互斥并取消抬起