简述
本文将通过简单示例介绍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助手，如有错误，请指正，谢谢！