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