QSS 自定义QPushButton

QSS 自定义QPushButton

    • 简述
    • 常用属性、子控件和伪状态
    • 效果图
    • QSS
    • 源码
    • 参考

简述

本文将通过简单示例介绍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 自定义QPushButton_第1张图片

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 
#include 

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 

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 
#include 
#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 

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助手,如有错误,请指正,谢谢!

你可能感兴趣的:(QSS)