QSS 自定义QPushButton

简述

本文将通过简单示例介绍QPushButton样式如何自定义。

常用属性、子控件和伪状态

QPushButton常用属性如下：

• border
• border-radius
• margin
• padding
• background
• color
• font
• border-image
  其中有些属性可细分，如border-color、border-width、border-top、border-top-color、border-top-width、border-top-radius；margin-top；padding-top等等，可根据需要进行多样化定制。
  属性分类，请参考QSS系列：属性类型集合

QPushButton子控件如下：

• menu-indicator
  子控件分类，请参考QSS系列：子控件集合

QPushButton常用伪状态如下：

• default
• hover
• checked
• pressed
• disabled
  伪状态分类，请参考QSS系列：伪状态集合

QPushButton支持伪状态链，比如：

• pressed:checked
• hover:unchecked

效果图

简单定义QPushButton在Normal、Checked、Disabled、有菜单状态和有图片下的样式。

QSS

如何使用样式表，请参考QSS系列：设置样式表

* {
	outline: none; /* 去掉有焦点时的虚线 */
}

QDialog {
	background: #D6DBE9; /* 对话框背景色 */
}

QPushButton {
	border: 1px solid #298DFF; /* QPushButton边框的宽度、样式和颜色 */
	border-radius: 3px; /* 边框圆角 */
	background-color: #F2F2F2; /* 背景颜色 */
	color: #298DFF; /* 文本颜色 */
	font-family: "Microsoft YaHei"; /* 文本字体族 */
	font-size: 10pt; /* 文本字体大小 */
}

QPushButton:hover {	/* 鼠标悬浮在QPushButton上时的状态 */
	background-color: #298DFF;
	color: #F2F2F2;
}

QPushButton:checked { /* QPushButton可选中时的状态 */
	border: 1px solid #FF5242;
	background-color: #F2F2F2;
	color: #FF5242;
}

QPushButton:pressed { /* 鼠标按压在QPushButton上时的状态 */
	background-color: #257FE6;
}

QPushButton:checked:pressed { /* QPushButton处于可选中且鼠标按压在QPushButton上时的状态 */
	background-color: #F2F2F2;
}

QPushButton:disabled { /* QPushButton禁用时的状态 */
	border: 1px solid #CDCDCD;
	background-color: #CDCDCD;
	color: #B4B4B4;
}

QPushButton#ImageButton { /* 定义图片按钮，ImageButton为对象名，在QSS中为特定对象定制样式 */
	border-image: url(":/Resource/border_image"); /* 使用border-image可以自适应按钮大小 */
	background-color: transparent; /* 不需要背景时可设为透明 */
}

QPushButton#ImageButton:hover {
	border-image: url(":/Resource/border_image_hover");
}

QPushButton#ImageButton:pressed {
	border-image: url(":/Resource/border_image");
}

QPushButton:menu-indicator { /* QPushButton带有菜单时的菜单指示器 */
	subcontrol-origin：padding; /* 菜单指示器的起始点 */
	subcontrol-position: center right; /* 菜单指示器的位置，处于水平靠右且垂直居中 */
	image: url(:/Resource/down_arrow_normal); /* 菜单指示器的图像 */
}

QPushButton:menu-indicator:hover, QPushButton:menu-indicator:open { /* 鼠标悬浮在菜单指示器上和菜单指示器启用时的状态 */
	position: relative;
	top: 2px;
	left: 2px;
	image: url(:/Resource/down_arrow_hover);
}

QMenu { /* 简单定义菜单样式 */
	border: 1px solid gray;
	border-radius: 3px;
	background-color: #F2F2F2;
}

QMenu::item { /* 菜单项的样式 */
	padding: 0px 0px 0px 40px;
	border: 0px solid transparent;
	background-color: transparent;
	color: #298DFF;
	min-width: 108px; /* 菜单项最小宽度，108+40+1*2=150，使得菜单宽度和QPushButton宽度保持一致 */
	min-height: 30px; /* 菜单项的最小高度 */
}

QMenu::item:selected { /* 菜单项处于选中时的状态 */
	background-color: #298DFF;
	color: #F2F2F2;
}

源码

• main.cpp

#include "MainWindow.h"
#include <QtWidgets/QApplication>
#include <QFile>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

	//全局加载样式表
	QFile styleFile(":/Resource/DefaultTheme");
	if (styleFile.open(QIODevice::ReadOnly))
	{
		QString string = styleFile.readAll();
		qApp->setStyleSheet(string);
	}

    MainWindow w;
    w.show();
    return a.exec();
}

• QCustomMenu.h、QCustomMenu.cpp

#ifndef QCUSTOMMENU_H
#define QCUSTOMMENU_H

#include <QMenu>

class QCustomMenu : public QMenu
{
	Q_OBJECT

public:
	explicit QCustomMenu(QWidget *parent = nullptr);
	~QCustomMenu();
};

#endif

#include "QCustomMenu.h"

QCustomMenu::QCustomMenu(QWidget *parent)
	: QMenu(parent)
{
	//自定义QMenu
	//取消边框和阴影
	this->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);
	this->setAttribute(Qt::WA_TranslucentBackground);
}

QCustomMenu::~QCustomMenu()
{
}

• MainWindow.h、MainWindow.cpp

#ifndef MainWindow_H
#define MainWindow_H

#include <QDialog>
#include <QPushButton>
#include "QCustomMenu.h"

class MainWindow : public QDialog
{
	Q_OBJECT

public:
	MainWindow(QWidget *parent = Q_NULLPTR);

private:
	void Init();

private slots:
	void OnCheckedButtonClicked(bool checked);

private:
	QPushButton *m_pNormalButton;
	QPushButton *m_pCheckedButton;
	QPushButton *m_pDisabledButton;
	QPushButton *m_pMenuButton;
	QPushButton *m_pImageButton;
	QCustomMenu *m_pButtonMenu;
};
#endif // !MainWindow_H

#include "MainWindow.h"

#include <QBoxLayout>

MainWindow::MainWindow(QWidget *parent)
    : QDialog(parent)
{
	Init();
}

void MainWindow::Init()
{
	//Normal QPushButton
	m_pNormalButton = new QPushButton("Normal", this);
	m_pNormalButton->setFixedSize(150, 40);

	//Checked QPushButton
	m_pCheckedButton = new QPushButton("Unchecked", this);
	m_pCheckedButton->setFixedSize(150, 40);
	m_pCheckedButton->setCheckable(true);
	m_pCheckedButton->setChecked(false);
	connect(m_pCheckedButton, SIGNAL(clicked(bool)), this, SLOT(OnCheckedButtonClicked(bool)));

	//Disabled QPushButton
	m_pDisabledButton = new QPushButton("Disabled", this);
	m_pDisabledButton->setFixedSize(150, 40);
	m_pDisabledButton->setEnabled(false);

	//Menu QPushButton
	m_pMenuButton = new QPushButton("Menu", this);
	m_pMenuButton->setFixedSize(150, 40);
	
	//使用自定义菜单
	m_pButtonMenu = new QCustomMenu(this);
	m_pButtonMenu->addAction("OK");
	m_pButtonMenu->addAction("CANCEL");
	m_pMenuButton->setMenu(m_pButtonMenu);

	//图片按钮
	m_pImageButton = new QPushButton(this);
	m_pImageButton->setObjectName("ImageButton"); //设定对象名，可在QSS中为此图片按钮定制专属样式
	m_pImageButton->setFixedSize(73, 73);
	
	//垂直布局
	QVBoxLayout *pLayout = new QVBoxLayout;
	pLayout->addWidget(m_pNormalButton, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pCheckedButton, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pDisabledButton, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pMenuButton, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pImageButton, 1, Qt::AlignHCenter);
	pLayout->setSpacing(10);
	pLayout->setContentsMargins(10, 10, 10, 10);

	this->setLayout(pLayout); //设置布局
	this->setMinimumSize(600, 500); //设定最小大小
}

void MainWindow::OnCheckedButtonClicked(bool checked)
{
	//改Checked QPushButton的文本
	if (checked)
	{
		m_pCheckedButton->setText("Checked");
	}
	else
	{
		m_pCheckedButton->setText("Unchecked");
	}
}

参考

参考Qt助手，如有错误，请指正，谢谢！