QSS 自定义QLineEdit

简述

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

常用属性和伪状态

QLineEdit通用属性如下：

• border
• border-radius
• margin
• padding
• background
• color
• font
• border-image

QLineEdit特有属性如下：

• lineedit-password-character
  The QLineEdit password character as a Unicode number.
• lineedit-password-mask-delay
  The QLineEdit password mask delay in milliseconds before lineedit-password-character is applied to visible character.
• selection-background-color
• selection-color
  属性分类，请参考QSS系列：属性类型集合

QLabel常用伪状态如下：

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

效果图

简单定义QLabel在Normal、有输入掩码、ReadOnly、Disabled和有ClearButton下的样式。

QSS

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

* {
	outline: none;
}

QDialog {
	background: #D6DBE9;
}

QLineEdit {
	border: 1px solid #A0A0A0; /* 边框宽度为1px，颜色为#A0A0A0 */
	border-radius: 3px; /* 边框圆角 */
	padding-left: 5px; /* 文本距离左边界有5px */
	background-color: #F2F2F2; /* 背景颜色 */
	color: #A0A0A0; /* 文本颜色 */
	selection-background-color: #A0A0A0; /* 选中文本的背景颜色 */
	selection-color: #F2F2F2; /* 选中文本的颜色 */
	font-family: "Microsoft YaHei"; /* 文本字体族 */
	font-size: 10pt; /* 文本字体大小 */
}

QLineEdit:hover { /* 鼠标悬浮在QLineEdit时的状态 */
	border: 1px solid #298DFF;
	border-radius: 3px;
	background-color: #F2F2F2;
	color: #298DFF;
	selection-background-color: #298DFF;
	selection-color: #F2F2F2;
}

QLineEdit[echoMode="2"] { /* QLineEdit有输入掩码时的状态 */
	lineedit-password-character: 9679;
	lineedit-password-mask-delay: 2000;
}

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

QLineEdit:read-only { /* QLineEdit在只读时的状态 */
	background-color: #CDCDCD;
	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();
}

• MainWindow.h、MainWindow.cpp

#ifndef MainWindow_H
#define MainWindow_H

#include <QDialog>
#include <QLineEdit>

#define FIXED_WIDTH 200
#define FIXED_HEIGHT 40

class MainWindow : public QDialog
{
	Q_OBJECT

public:
	MainWindow(QWidget *parent = Q_NULLPTR);

private:
	void Init();

private:
	QLineEdit *m_pNormalEdit;
	QLineEdit *m_pEchoEdit;
	QLineEdit *m_pReadOnlyEdit;
	QLineEdit *m_pDisabledEdit;
	QLineEdit *m_pClearEdit;
};
#endif // !MainWindow_H

#include "MainWindow.h"

#include <QBoxLayout>

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

void MainWindow::Init()
{
	//Normal QLineEdit
	m_pNormalEdit = new QLineEdit(this);
	m_pNormalEdit->setFixedSize(FIXED_WIDTH, FIXED_HEIGHT);

	//Input Mask QLineEdit
	m_pEchoEdit = new QLineEdit(this);
	m_pEchoEdit->setFixedSize(FIXED_WIDTH, FIXED_HEIGHT);
	m_pEchoEdit->setEchoMode(QLineEdit::Password); //设置QLineEdit有输入掩码

	//ReadOnly QLineEdit
	m_pReadOnlyEdit = new QLineEdit(this);
	m_pReadOnlyEdit->setFixedSize(FIXED_WIDTH, FIXED_HEIGHT);
	m_pReadOnlyEdit->setReadOnly(true);	//设置QLineEdit为只读状态
	m_pReadOnlyEdit->setText("ReadOnly");

	//Disabled QLineEdit
	m_pDisabledEdit = new QLineEdit(this);
	m_pDisabledEdit->setFixedSize(FIXED_WIDTH, FIXED_HEIGHT);
	m_pDisabledEdit->setEnabled(false); //设置QLineEdit为禁用状态
	m_pDisabledEdit->setText("Disabled");

	//ClearButton QLineEdit
	m_pClearEdit = new QLineEdit(this);
	m_pClearEdit->setFixedSize(FIXED_WIDTH, FIXED_HEIGHT);
	m_pClearEdit->setClearButtonEnabled(true); //设置QLineEdit有清除按钮

	//垂直布局
	QVBoxLayout *pLayout = new QVBoxLayout;
	pLayout->addWidget(m_pNormalEdit, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pEchoEdit, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pReadOnlyEdit, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pDisabledEdit, 1, Qt::AlignHCenter);
	pLayout->addWidget(m_pClearEdit, 1, Qt::AlignHCenter);
	pLayout->setSpacing(10);
	pLayout->setContentsMargins(10, 10, 10, 10);

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

参考

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