第二章 常用控件 | 2.4 文本框-QLineEdit

QLineEdit是Qt框架中一个单行文本输入控件
它是程序获取用户文本输入最常用的方式，例如用户名、密码或其他简单的文本信息。

1. 效果演示

演示文本框的多种属性，以及信号槽的用法。

2. 属性和方法

QLineEdit有很多属性，完整的可查看帮助文档。这里列出常用的属性和方法

2.1 占位字符串

占位字符，就是当文本框中输入内容为空时，显示的字符，用于提示用户文本框中应该输入什么内容

// 获取和设置占位字符串
QString placeholderText() const
void setPlaceholderText(const QString &)   

如下，是QQ登录界面的用户名和密码文本框，在输入内容为空时，提示如下：

2.2 对齐方式

用于设置文本框中的内容在水平和垂直两个方向上的对齐方式，比如左对齐、右对齐、上对齐、下对齐、水平居中、垂直居中等。

// 获取和设置文本的对齐方式
Qt::Alignment alignment() const
void setAlignment(Qt::Alignment flag)

其中，Qt::Alignment是一个枚举，常用取值如下：

枚举	值	含义
Qt::AlignLeft	0x0001	水平方向-左对齐
Qt::AlignRight	0x0002	水平方向-右对齐
Qt::AlignHCenter	0x0004	水平方向-居中对齐
Qt::AlignTop	0x0020	垂直方向-上对齐
Qt::AlignBottom	0x0040	垂直方向-下对齐
Qt::AlignVCenter	0x0080	垂直方向-居中对齐
Qt::AlignCenter（AlignVCenter | AlignHCenter）	0x0084	垂直方向和水平方向-居中对齐

上面的每一个宏，都代表16进制中的一位，可以进行或（|）操作，来同时设置多个对齐方式。
该属性，既可以在Qt设计师右侧的属性窗口中修改，也可以在代码中动态地获取和修改

2.3 回显模式

所谓回显模式（EchoMode），它决定了用户在输入时，输入框内实际展示的内容

// 获取和设置回显模式
QLineEdit::EchoMode echoMode() const
void setEchoMode(QLineEdit::EchoMode)

其中，QLineEdit::EchoMode是一个宏，有如下4个取值：

枚举	含义
QLineEdit::Normal	正常模式 输入什么就显示什么，默认就是这种方式
QLineEdit::Password	密码模式 不显示实际输入的字符，而是以小圆圈代替，这样别人就无法看到输入的字符
QLineEdit::NoEcho	无回显模式 不会显示任何字符（连掩码符号都没有），既无法看到输入内容，也无法得知输入长度 这对于输入密码非常有用，在linux下输入密码时，就是这种模式
QLineEdit::PasswordEchoOnEdit	正在输入时按正常模式显示，当失去焦点时以密码模式显示，也就是显示小圆圈

2.4 读写控制

用于设置文本框是否可编辑、是否使能

// 获取和设置文本框的只读属性
bool isReadOnly() const
void setReadOnly(bool)

// 获取和设置文本框的是否使能
bool isEnabled() const
void setEnabled(bool)

注意：设置为只读和设置为禁能，都无法对文本框进行编辑，区别在于，只读时文本框不会置灰，而禁能时文本框会置灰

2.5 格式控制

用于强制文本框只允许输入特定格式的内容。
它通过一个掩码模板，限制用户只能按照指定的格式输入，常用于电话号码、日期、身份证号等固定格式的数据

// 设置和获取格式控制
QString inputMask() const
void setInputMask(const QString &inputMask)

它接收一个字符串类型的掩码，常用格式如下：

// 无格式
// 接受任何字符的输入
setInputMask("");

// 电话号码
// 9 - 表示要求输入0-9的数字
// ;# - 表示格式字符串结束，并且未输入时显示#
ui->leMask->setInputMask("99999999999;#");

// 密钥
// A - 表示要求输入英文字符A-Z或者a-z
// > - 表示后边的英文字符都转为大写
// ;* - 表示格式字符串结束，并且未输入时显示*
ui->leMask->setInputMask(">AAAAA-AAAAA-AAAAA-AAAAA-AAAAA;*");

其他更多格式使用方法，直接查看QLineEdit帮助文档即可，以上仅作为抛砖引玉
实际工作中，往往使用正则表达式，更加灵活！

2.6 信号槽

QLineEdit有多个信号和槽函数，详情可参考官方帮助文档，这里仅演示两个常用的，作为抛砖引玉

// 当文本框内容改变时，发射该信号
void textChanged(const QString &text)

// 当输入完毕时，发射该信号
// 什么叫输入完毕呢？ 答：a、按了enter键    b、文本框失去焦点
void editingFinished()

3. 从零实现

从零写代码实现整体效果，以演示文本框的属性以及信号槽的用法

3.1 布局

在UI设计师界面，拖拽对应的控件，修改显示的文字、控件的名称，然后完成布局

• 合理地使用了水平、垂直、栅格布局
• 合理地使用弹簧
• 合理地调整Layout的各种参数，来设置外边距、内边距
• 合理地调整字体大小

即可完成以下效果，多操作自然就熟练了(完成后的代码，会一并共享给大家的~)

3.2 代码实现

3.2.1 字体设置

首先，在mywidget.h中，声明相应的槽函数，如下：

#include <QButtonGroup>

class MyWidget : public QWidget {

private slots:
    // 1. 字体设置
    void onBtnGroupAlignmentClicked(int id);
    void onChkFontClicked(bool checked);

private:
    QButtonGroup *btnGroupAlignment;
};

然后，在mywidget.cpp的构造中，关联槽函数，如下：

MyWidget::MyWidget(QWidget* parent) : QWidget(parent), ui(new Ui::MyWidget) {

    this->setWindowTitle("明王讲QT | 第二章 常用控件 | 2.4 文本框QLineEdit");

    // 1. 对齐和字体设置
    // 对齐
    ui->lineEditAlignment->setText("文本框QLineEdit");
    ui->lineEditAlignment->setPlaceholderText("请输入一段文字");

    btnGroupAlignment = new QButtonGroup(this);
    btnGroupAlignment->addButton(ui->radioAlignLeft, 0);
    btnGroupAlignment->addButton(ui->radioAlignCenter, 1);
    btnGroupAlignment->addButton(ui->radioAlignRight, 2);

    connect(btnGroupAlignment, &QButtonGroup::idClicked, this, &Widget::onBtnGroupAlignmentClicked);
    ui->radioAlignCenter->click();

    // 字体
    connect(ui->chkBold, &QCheckBox::clicked, this, &Widget::onChkFontClicked);
    connect(ui->chkItalic, &QCheckBox::clicked, this, &Widget::onChkFontClicked);
    connect(ui->chkUnderline, &QCheckBox::clicked, this, &Widget::onChkFontClicked);
}

最后，实现这两个槽函数，如下：

void MyWidget::onBtnGroupAlignmentClicked(int id) {
    if ( id == 0 ) {
        ui->lineEditAlignment->setAlignment(Qt::AlignLeft);
    } else if ( id == 1 ) {
        ui->lineEditAlignment->setAlignment(Qt::AlignCenter);
    } else if ( id == 2 ) {
        ui->lineEditAlignment->setAlignment(Qt::AlignRight);
    }
}

void MyWidget::onChkFontClicked(bool checked) {
    QFont font = ui->lineEditAlignment->font();

    font.setBold(ui->chkBold->isChecked());
    font.setItalic(ui->chkItalic->isChecked());
    font.setUnderline(ui->chkUnderline->isChecked());

    ui->lineEditAlignment->setFont(font);
}

3.2.2 读写控制

首先，在mywidget.h中，声明相应的槽函数，如下：

class MyWidget : public QWidget {

private slots:
    // 2. 读写控制
    void on_btnAccessReadWrite_clicked();
    void on_btnAccessReadOnly_clicked();
    void on_btnAccessDisabled_clicked();
    void on_btnAccessEnabled_clicked();
};

然后，在mywidget.cpp中实现这4个槽函数，如下：

void MyWidget::on_btnAccessReadWrite_clicked() {
    ui->lineEditAccess->setReadOnly(false);
}

void MyWidget::on_btnAccessReadOnly_clicked() {
    ui->lineEditAccess->setReadOnly(true);
}

void MyWidget::on_btnAccessDisabled_clicked() {
    ui->lineEditAccess->setEnabled(false);
}

void MyWidget::on_btnAccessEnabled_clicked() {
    ui->lineEditAccess->setEnabled(true);
}

3.2.3 回显模式

首先，在mywidget.h中，声明相应的槽函数，如下：

class MyWidget : public QWidget {

private slots:
    // 3. 回显模式
    void onBtnGroupEchoClicked(int id);
    void onBtnPrintClicked();

private:
    QButtonGroup *btnGroupEcho;
};

然后，在mywidget.cpp的构造中，关联槽函数，如下：

MyWidget::MyWidget(QWidget* parent) : QWidget(parent), ui(new Ui::MyWidget) {

    // 3. 回显模式
    ui->lineEditEcho->setPlaceholderText("请输入密码");

    btnGroupEcho = new QButtonGroup(this);
    btnGroupEcho->addButton(ui->radioNormal, 0);
    btnGroupEcho->addButton(ui->radioPassword, 1);
    btnGroupEcho->addButton(ui->radioNoEcho, 2);
    btnGroupEcho->addButton(ui->radioPasswordEchoOnEdit, 3);

    connect(btnGroupEcho, &QButtonGroup::idClicked, this, &Widget::onBtnGroupEchoClicked);
    connect(ui->btnPrint, &QPushButton::clicked, this, &Widget::onBtnPrintClicked);

    ui->radioNormal->click();
}

最后，实现这两个槽函数，如下：

void MyWidget::onBtnGroupEchoClicked(int id) {
    ui->lineEditEcho->clear();

    if ( id == 0 ) {
        ui->lineEditEcho->setEchoMode(QLineEdit::Normal);
    } else if ( id == 1 ) {
        ui->lineEditEcho->setEchoMode(QLineEdit::Password);
    } else if ( id == 2 ) {
        ui->lineEditEcho->setEchoMode(QLineEdit::NoEcho);
    } else if ( id == 3 ) {
        ui->lineEditEcho->setEchoMode(QLineEdit::PasswordEchoOnEdit);
    }
}

void MyWidget::onBtnPrintClicked() {
    QMessageBox::information(this, "回显模式", ui->lineEditEcho->text());
}

3.2.4 格式控制

首先，在mywidget.h中，声明相应的槽函数，如下：

class MyWidget : public QWidget {

private slots:
    // 4. 格式控制
    void onBtnGroupMaskClicked(int id);

private:
    QButtonGroup *btnGroupMask;
};

然后，在mywidget.cpp的构造中，关联槽函数，如下：

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget)
{
    // ...

    // 4. 格式控制
    btnGroupMask = new QButtonGroup(this);
    btnGroupMask->addButton(ui->radioMaskNone, 0);
    btnGroupMask->addButton(ui->radioMaskPhone, 1);
    btnGroupMask->addButton(ui->radioMaskLicense, 2);

    connect(btnGroupMask, &QButtonGroup::idClicked, this, &Widget::onBtnGroupMaskClicked);
    ui->radioMaskNone->click();
}

最后，实现槽函数，如下：

void MyWidget::onBtnGroupMaskClicked(int id) {
    if ( id == 0 ) {
        ui->lineEditMask->setInputMask("");
    } else if ( id == 1 ) {
        // 9 - 表示要求输入0-9的数字
        // ;# - 表示格式字符串结束，并且未输入时显示#
        ui->lineEditMask->setInputMask("99999999999;#");
    } else if ( id == 2 ) {
        // A - 表示要求输入英文字符A-Z或者a-z
        // > - 表示后边的英文字符都转为大写
        // ;* - 表示格式字符串结束，并且未输入时显示*
        ui->lineEditMask->setInputMask(">AAAAA-AAAAA-AAAAA-AAAAA-AAAAA;*");
    }
}

3.2.5 信号槽

首先，在mywidget.h中，声明相应的槽函数，如下：

class MyWidget : public QWidget {

private slots:
    // 5. 信号槽
    void on_lineEditAdd1_textChanged(const QString &arg1);
    void on_lineEditAdd2_textChanged(const QString &arg1);
    void on_lineEditSub1_editingFinished();
    void on_lineEditSub2_editingFinished();
};

然后，在mywidget.cpp的构造中，限制文本框只可以输入数字，如下：

#include <QIntValidator>

MyWidget::MyWidget(QWidget* parent) : QWidget(parent), ui(new Ui::MyWidget) {
    
    // 5. 信号槽
    // 演示-textChanged信号
    ui->lineEditAdd1->setValidator(new QIntValidator(this));  // 用于设置校验,只允许文本框中输入整数
    ui->lineEditAdd1->setPlaceholderText("加数");
    ui->lineEditAdd2->setValidator(new QIntValidator(this));
    ui->lineEditAdd2->setPlaceholderText("被加数");
    ui->lineEditSum->setPlaceholderText("和");

    // 演示-textFinished信号
    ui->lineEditSub1->setValidator(new QIntValidator(this));
    ui->lineEditSub1->setPlaceholderText("减数");
    ui->lineEditSub2->setValidator(new QIntValidator(this));
    ui->lineEditSub2->setPlaceholderText("被减数");
    ui->lineEditResult->setPlaceholderText("差");
}

最后，实现槽函数，如下：

void MyWidget::on_lineEditAdd1_textChanged(const QString& arg1) {
    int sum = arg1.toInt() + ui->lineEditAdd2->text().toInt();
    ui->lineEditSum->setText(QString::number(sum));
}

void MyWidget::on_lineEditAdd2_textChanged(const QString& arg1) {
    int sum = ui->lineEditAdd1->text().toInt() + arg1.toInt();
    ui->lineEditSum->setText(QString::number(sum));
}

void MyWidget::on_lineEditSub1_editingFinished() {
    int result = ui->lineEditSub1->text().toInt() - ui->lineEditSub2->text().toInt();
    ui->lineEditResult->setText(QString::number(result));
}

void MyWidget::on_lineEditSub2_editingFinished() {
    int result = ui->lineEditSub1->text().toInt() - ui->lineEditSub2->text().toInt();
    ui->lineEditResult->setText(QString::number(result));
}

4. 点赞、获取源码

看到这里的小伙伴，去B站给明王一个【免费的点赞】吧，你的支持，是我持续更新优质内容的动力，感谢~

源码下载地址
链接: https://pan.baidu.com/s/1UwMYXAc1dEUMq5zk5Jmf9g
提取码: ming