Qt学习日志 登陆界面设计

Qt学习日志 登陆界面设计

本文采用ui界面和代码相结合的方式完成。实现功能有登陆背景、登陆默认账号和密码，以及账号密码错误提示。

话不多说，先上效果图

登录首界面
用户名或密码错误提示

（1）新建工程

创建新的 qt Empty qmake Project,在.pro文件中增加QT+=widgets

（2）新建文件，添加QT设计师界面类，如下图

（3）login.ui文件设计如下

添加了3个QLabel，分别用作logo、登录用户名和密码框；2个QLineEdit，分别用作用户名和密码的输入；两个按钮分别为登录和退出。
右键pushbutton，依次点击“转为槽”->clicked();

login.ui文件设计基本完成。

（4）login.cpp

#include "login.h"
#include "ui_login.h"
#include<QMessageBox>

login::login(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::login)
{
    ui->setupUi(this);
    this->setWindowTitle(tr("**物流分析工具"));
    //提示性 默认账号密码
    ui->lineEdit->setText(tr("Admin"));
    ui->lineEdit_2->setText(tr("Admin"));
    ui->lineEdit_2->setEchoMode(QLineEdit::Password);//密码用圆点表示
    //设置校徽logo
    QImage *logo_img = new QImage(":/new/prefix1/src/logo.png");
    QImage *scaled_logo_img = new QImage();
    *scaled_logo_img = logo_img->scaled(120, 120, Qt::KeepAspectRatio);
    ui->label->setPixmap(QPixmap::fromImage(*scaled_logo_img));
    //设置背景图片
    QPixmap pixmap = QPixmap(":/new/prefix1/src/door.png").scaled(this->size());
    QPalette palette(this->palette());
    palette.setBrush(QPalette::Background, QBrush(pixmap));
    this->setPalette(palette);
}

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

void login::on_pushButton_clicked()
{
    //获得userNameLEd输入框的文本：userNameLEd->text()；
    //trimmed()去掉前后空格
    //tr()函数，防止设置中文时乱码
    if(ui->lineEdit->text().trimmed() == tr("Admin") && ui->lineEdit_2->text() == tr("Admin")) {
        accept();//关闭窗体，并设置返回值为Accepted
    } else {
        //标题              内容                OK按钮
        QMessageBox::warning(this, tr("警告！"), tr("用户名或密码错误！"), QMessageBox::Yes);
        // 清空输入框内容
        ui->lineEdit->clear();
        ui->lineEdit_2->clear();
        //光标定位
        ui->lineEdit->setFocus();
    }
}
void login::on_pushButton_2_clicked()
{
    login::close();
}

实现功能在代码中均有体现

（5）login.h

login.h文件在login.ui设计完成后，将自动生成，这也是ui界面设计比纯代码设计的优点之一，其他优势还有界面布局等等。但是纯代码编写也有自己的优势，在这里不再赘述。

#ifndef LOGIN_H
#define LOGIN_H

#include <QDialog>

namespace Ui
{
    class login;
}

class login : public QDialog
{
    Q_OBJECT

public:
    explicit login(QWidget *parent = nullptr);
    ~login();

private slots:
    void on_pushButton_clicked();

    void on_pushButton_2_clicked();

private:
    Ui::login *ui;
};

#endif // LOGIN_H

（6）实现

在主函数调用即可
代码及案例如下：代码及案例下载地址https://download.youkuaiyun.com/download/qq_43196500/12675327