QSS 自定义QLineEdit

---

Chapter1 QSS 自定义QLineEdit

原文链接：https://blog.csdn.net/Staranywhere/article/details/107306276

简述

本文将通过简单示例介绍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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

源码

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();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

MainWindow.h、MainWindow.cpp

#ifndef MainWindow_H
#define MainWindow_H

#include 
#include 

#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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#include "MainWindow.h"

#include 

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); //设定最小大小
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

参考

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