QSS 自定义QLabel

简述

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

常用属性和伪状态

QLabel常用属性如下：

• 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系列：属性类型集合

QLabel常用伪状态如下：

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

效果图

简单定义QLabel在Normal、Disabled、有Padding和有背景图片下的样式。

QSS

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

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

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

QLabel {
    
    
	border: 0px solid #298DFF; /* 无边框 */
	border-radius: 3px; /* 边框圆角 */
	background-color: #F2F2F2; /* 背景颜色 */
	color: #298DFF; /* 文本颜色 */
	font-family: "Microsoft YaHei"; /* 文本字体族 */
	font-size: 10pt; /* 文本字体大小 */
}

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

QLabel#PaddingLabel {
    
     /* 定义有Padding的QLabel，PaddingLabel为对象名，在QSS中为特定对象定制样式 */
	padding-left: 10px; /* 文本距离左边界有10px */
}

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

源码

• 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();
}

• MainWindow.h、MainWindow.cpp

#ifndef MainWindow_H
#define MainWindow_H

#include <QDialog>
#include <QLabel>

class MainWindow : public QDialog
{
    
    
	Q_OBJECT

public:
	MainWindow(QWidget *parent = Q_NULLPTR);

private:
	void Init();

private:
	QLabel *m_pNormalLabel;
	QLabel *m_pDisabledLabel;
	QLabel *m_pPaddingLabel;
	QLabel *m_pImageLabel;
};
#endif // !MainWindow_H

#include "MainWindow.h"

#include <QBoxLayout>

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

void MainWindow::Init()
{
    
    
	//Normal QLabel
	m_pNormalLabel = new QLabel("Normal", this);
	m_pNormalLabel->setFixedSize(150, 40);
	m_pNormalLabel->setAlignment(Qt::AlignCenter); //设置文本居中显示

	//Disabled QLabel
	m_pDisabledLabel = new QLabel("Disabled", this);
	m_pDisabledLabel->setEnabled(false); //设置QLabel为禁用状态
	m_pDisabledLabel->setFixedSize(150, 40);
	m_pDisabledLabel->setAlignment(Qt::AlignCenter); //设置文本居中显示

	//Padding QLabel
	m_pPaddingLabel = new QLabel("Padding", this);
	m_pPaddingLabel->setObjectName("PaddingLabel"); //设定对象名，可在QSS中为此图片按钮定制专属样式
	m_pPaddingLabel->setFixedSize(150, 40);

	//Image QLabel
	m_pImageLabel = new QLabel(this);
	m_pImageLabel->setObjectName("ImageLabel"); //设定对象名，可在QSS中为此图片按钮定制专属样式
	m_pImageLabel->setFixedSize(36, 32);

	//垂直布局
	QVBoxLayout *pLayout = new QVBoxLayout;
	pLayout->addWidget(m_pNormalLabel, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pDisabledLabel, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pPaddingLabel, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pImageLabel, 1, Qt::AlignHCenter);
	pLayout->setSpacing(10);
	pLayout->setContentsMargins(10, 10, 10, 10);

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

参考

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