【三十】【QT开发应用】QSS之控件QLineEdit

最新推荐文章于 2024-10-09 21:06:15 发布

妖精七七_

最新推荐文章于 2024-10-09 21:06:15 发布

阅读量551

点赞数 9

分类专栏： QT开发应用文章标签： qt 命令模式开发语言

本文链接：https://blog.csdn.net/m0_74163972/article/details/142750916

版权

QT开发应用专栏收录该内容

33 篇文章 1 订阅

订阅专栏

QSS（Qt Style Sheets）是一种用于定制 Qt 应用程序中控件外观的样式表语言，类似于 Web 开发中的 CSS。通过 QSS，开发者可以轻松地修改控件的颜色、字体、边框、间距等属性，从而实现个性化的界面设计。对于 QLineEdit 控件，QSS 可以用于设置背景颜色、文本颜色、边框样式、内边距等，提升输入框的视觉效果和用户体验，使得界面更加美观和符合应用需求。

MainWidget.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QRegularExpression>
#include <QRegularExpressionValidator>

#include <QMessageBox>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->lineEdit->setText("Hello LineEdit");
    ui->lineEdit_2->setText("Hello LineEdit");
    ui->lineEdit_3->setText("Hello LineEdit");
    ui->lineEdit_4->setText("Hello LineEdit");


    ui->lineEdit_2->setReadOnly(true);
    ui->lineEdit_3->setEchoMode(QLineEdit::Password);
    ui->lineEdit_4->setDisabled(true);

    QRegularExpression regx("\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\\.)+[A-Za-z]{2,14}");
    QValidator *validator = new QRegularExpressionValidator(regx, ui->lineEdit_5);
    ui->lineEdit_5->setValidator(validator);


    QString qss1=R"(
QLineEdit{
    border: 1px solid #ABCDA0;      /* 边框宽度为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;
}
)";

    this->setStyleSheet(qss1);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_btnCheck_clicked()
{
    const QValidator* v = ui->lineEdit_5->validator();
    int pos = 0;

    QString text = ui->lineEdit_5->text();
    if (v->validate(text, pos) != QValidator::Acceptable)
    {
        ui->lineEdit_5->setText(u8"邮箱格式不正确");
    }
    else
    {
        QMessageBox::information(this, u8"标题", u8"邮箱格式正确");
    }
}

在这里插入图片描述

前面四个 QLineEdit 分别用于测试不同的输入框属性配置：

第一个 QLineEdit：未配置任何特殊属性，保留默认输入行为。
第二个 QLineEdit：设置为只读属性，用户可以查看内容但无法进行编辑。
第三个 QLineEdit：配置为密码输入模式，输入内容以掩码字符显示（通常为 ●），用于保护敏感信息。
第四个 QLineEdit：设置为禁用状态，无法接收用户输入或编辑。

最后一个 QLineEdit 用于测试正则表达式验证，以确保输入符合指定的格式规则。

正则表达式

正则表达式代码使用了 QRegularExpression 和 QRegularExpressionValidator 来验证用户输入的电子邮件格式。这是 QRegularExpressionValidator 的推荐用法，特别是在 Qt 5.15 及更高版本中，取代了旧的 QRegExpValidator。

QRegularExpression regx("\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\\.)+[A-Za-z]{2,14}");
// 定义了一个 QRegularExpression 对象，用于匹配电子邮件地址的格式。

QValidator *validator = new QRegularExpressionValidator(regx, ui->lineEdit_5);
// 创建了一个基于 QRegularExpression 的验证器，将其应用到输入框 ui->lineEdit_5。

ui->lineEdit_5->setValidator(validator);
// 设置验证器到 lineEdit_5，确保用户输入的文本必须符合电子邮件地址的格式。

确保头文件已包含：
你需要包含 QRegularExpression 和 QRegularExpressionValidator 的头文件：

#include <QRegularExpression>
#include <QRegularExpressionValidator>

槽函数

这段代码的功能是，当用户点击按钮时，程序会验证 lineEdit_5 输入框中的文本是否符合之前设置的电子邮件格式。如果验证失败，程序会提示“邮箱格式不正确”，否则会显示“邮箱格式正确”的消息框。

void MainWindow::on_btnCheck_clicked()
{
    // 获取 lineEdit_5 的验证器
    const QValidator* v = ui->lineEdit_5->validator();
    
    // pos 是一个传递给 validate 函数的整型值，标识验证的位置。
    int pos = 0;

    // 获取用户输入的文本
    QString text = ui->lineEdit_5->text();
    
    // 如果验证器的 validate 函数返回的不是 Acceptable（即输入格式不正确）
    if (v->validate(text, pos) != QValidator::Acceptable)
    {
        // 设置输入框的文本为 "邮箱格式不正确"
        ui->lineEdit_5->setText(u8"邮箱格式不正确");
    }
    else
    {
        // 显示信息框，提示用户 "邮箱格式正确"
        QMessageBox::information(this, u8"标题", u8"邮箱格式正确");
    }
}

QSS

1. 默认状态下的 `QLineEdit` 样式

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

这部分定义了 QLineEdit 在默认状态下的样式：

边框为 1px 宽度，颜色为 #ABCDA0。
边框的圆角半径为 3px，内边距为 5px，使得文本与左侧边框有一定距离。
背景颜色为浅灰色 #F2F2F2，文本颜色为灰色 #A0A0A0。
选中文本时，背景颜色为灰色，文本颜色为浅灰色。
使用了微软雅黑字体，字体大小为 10pt。

2. 悬浮状态（鼠标悬停）下的 `QLineEdit` 样式

QLineEdit:hover {
    border: 1px solid #298DFF;      /* 悬浮时，边框颜色变为蓝色 */
    border-radius: 3px;             /* 保持圆角 */
    background-color: #F2F2F2;      /* 背景颜色保持不变 */
    color: #298DFF;                 /* 文本颜色变为蓝色 */
    selection-background-color: #298DFF; /* 选中文本的背景颜色变为蓝色 */
    selection-color: #F2F2F2;       /* 选中文本的颜色保持不变 */
}

当鼠标悬浮在 QLineEdit 上时，边框颜色变为蓝色 #298DFF。
文本颜色也变为蓝色，选中文本的背景颜色变为蓝色。

3. 有掩码输入时的 `QLineEdit` 样式

QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679; /* 输入时显示密码字符（●） */
    lineedit-password-mask-delay: 2000; /* 输入字符时，延迟2000毫秒（2秒）后转换为掩码字符 */
}

当 QLineEdit 的 echoMode 设置为 2 时（即密码模式），输入的字符会被显示为 9679 这个 Unicode 字符（●）。
设置了输入字符在 2000 毫秒（2 秒）之后，显示为掩码字符 ●。

4. 禁用状态下的 `QLineEdit` 样式

QLineEdit:disabled {
    border: 1px solid #CDCDCD;      /* 禁用时边框颜色变为浅灰色 */
    background-color: #CDCDCD;      /* 背景颜色变为浅灰色 */
    color: #B4B4B4;                 /* 文本颜色变为更浅的灰色 */
}

当 QLineEdit 被禁用时，边框和背景颜色变为更浅的灰色，文本颜色也变为浅灰色。

5. 只读状态下的 `QLineEdit` 样式

QLineEdit:read-only {
    background-color: #CDCDCD;      /* 背景颜色变为浅灰色 */
    color: #F2F2F2;                 /* 文本颜色变为浅灰色 */
}

当 QLineEdit 设置为只读时，背景颜色变为浅灰色，文本颜色为浅灰色 #F2F2F2。

知识点

QLineEdit 是 Qt 框架中常用的单行文本输入控件，广泛用于需要用户输入短文本的场景，如登录框、搜索框、表单等。下面详细介绍它的常用方法和属性，并延伸相关知识点，以便更好地理解和应用。

1. `setText()`

setText() 方法用于设置文本框中的内容。可以动态更新用户界面中的输入框文本内容。

用法：

lineEdit->setText("Hello World");

这个方法直接修改了 QLineEdit 显示的文本。
常用于初始化界面时给输入框一个默认值，或根据用户的输入进行更新。

扩展：

结合 text() 方法，可以获取用户输入的内容：
```
QString inputText = lineEdit->text();
```

2. `setReadOnly()`

setReadOnly() 用于设置文本框是否为只读模式。在只读模式下，用户不能编辑内容，但内容仍然可以被复制。

用法：

lineEdit->setReadOnly(true);

当参数为 true 时，QLineEdit 进入只读模式。
常用于显示不可修改的文本信息，如系统生成的 ID，或需要防止用户误修改的内容。

扩展：

常与表单数据展示结合使用，当用户仅需查看某些信息而不需要进行修改时，设置为只读模式。
还可以使用 setEnabled(false) 或 setDisabled(true) 完全禁用输入框，这样用户既不能编辑，也不能选中或复制文本。

3. `setEchoMode()`

setEchoMode() 用于设置文本框内容的显示模式，通常用于输入密码时隐藏输入字符。

用法：

lineEdit->setEchoMode(QLineEdit::Password);

EchoMode 常见选项：
- QLineEdit::Normal: 默认模式，输入的字符正常显示。
- QLineEdit::Password: 隐藏输入的字符，显示为 * 或 •。
- QLineEdit::NoEcho: 完全不显示输入内容。

扩展：

此功能主要用于增强安全性，常见于登录界面的密码输入框。
如果需要输入时显示密码，再次点击隐藏密码，可以结合复选框（CheckBox）切换 setEchoMode 值来实现。

4. `setDisabled()`

setDisabled() 方法用于禁用输入框，使其不可编辑和不可交互。

用法：

lineEdit->setDisabled(true);

禁用的控件通常会灰显，表示无法使用。

扩展：

与 setReadOnly() 的区别在于，setReadOnly() 仅禁止编辑，但用户依然可以复制文本；而 setDisabled() 完全禁用控件，用户无法进行任何操作。
在复杂表单或工作流程中，某些步骤可能会暂时禁用某些控件，等到特定条件满足后再启用它们，可以使用 setDisabled(false) 重新启用控件。

5. `setValidator()`

setValidator() 用于设置输入验证器，控制用户输入的格式。例如，限制用户只能输入整数、浮点数或特定模式的字符串。

用法：

QIntValidator *validator = new QIntValidator(0, 100, this);
lineEdit->setValidator(validator);

这个例子限制用户只能输入 0 到 100 之间的整数。

扩展：

QIntValidator：限制整数输入。
QDoubleValidator：限制浮点数输入，可以设置精度和范围。

QRegExpValidator：使用正则表达式来限制输入。例如，限制输入邮箱地址格式：

QRegExp regExp("[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}");
QRegExpValidator *validator = new QRegExpValidator(regExp, this);
lineEdit->setValidator(validator);

6. `setAlignment()`

setAlignment() 用于设置文本在输入框中的对齐方式。

用法：

lineEdit->setAlignment(Qt::AlignCenter);

选项包括：
- Qt::AlignLeft: 左对齐（默认）。
- Qt::AlignRight: 右对齐。
- Qt::AlignCenter: 居中对齐。

扩展：

在设计具有表单风格的界面时，可以通过 setAlignment() 美化界面。例如，在数据输入时，将金额类信息设置为右对齐，或者标题类信息居中对齐。
也可以结合样式表（stylesheet）进一步自定义文本框外观，如更改字体颜色、背景颜色等：
```
lineEdit->setStyleSheet("QLineEdit { background-color: yellow; }");
```

延伸知识点

信号和槽机制：
QLineEdit 继承自 QWidget，它的操作（如文本内容变化）可以与 Qt 的信号和槽机制结合，执行特定的操作。常用信号有：
- textChanged(const QString&): 当文本内容发生变化时发射。
- editingFinished(): 当用户完成编辑并按下回车键或控件失去焦点时发射。
用法示例：
```
connect(lineEdit, &QLineEdit::textChanged, this, &MainWindow::onTextChanged);
```
占位符文本：
可以使用 setPlaceholderText() 为输入框设置占位符文本（当输入框为空时显示的提示内容）。
```
lineEdit->setPlaceholderText("Enter your name");
```

自动补全功能：
QLineEdit 可以通过 QCompleter 提供自动补全功能，用户输入时会根据可能的选项进行补全提示。

QStringList wordList = {"apple", "banana", "grape"};
QCompleter *completer = new QCompleter(wordList, this);
lineEdit->setCompleter(completer);

结尾

最后，感谢您阅读我的文章，希望这些内容能够对您有所启发和帮助。如果您有任何问题或想要分享您的观点，请随时在评论区留言。
同时，不要忘记订阅我的博客以获取更多有趣的内容。在未来的文章中，我将继续探讨这个话题的不同方面，为您呈现更多深度和见解。
谢谢您的支持，期待与您在下一篇文章中再次相遇！

妖精七七_

关注

9
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【三十】【QT开发应用】QSS之控件QLineEdit

MainWidget.cpp

正则表达式

槽函数

QSS

1. 默认状态下的 QLineEdit 样式

2. 悬浮状态（鼠标悬停）下的 QLineEdit 样式

3. 有掩码输入时的 QLineEdit 样式

4. 禁用状态下的 QLineEdit 样式

5. 只读状态下的 QLineEdit 样式

知识点

1. setText()

2. setReadOnly()

3. setEchoMode()

4. setDisabled()

5. setValidator()

6. setAlignment()

延伸知识点

结尾

1. 默认状态下的 `QLineEdit` 样式

2. 悬浮状态（鼠标悬停）下的 `QLineEdit` 样式

3. 有掩码输入时的 `QLineEdit` 样式

4. 禁用状态下的 `QLineEdit` 样式

5. 只读状态下的 `QLineEdit` 样式

1. `setText()`

2. `setReadOnly()`

3. `setEchoMode()`

4. `setDisabled()`

5. `setValidator()`

6. `setAlignment()`