qt5—登录界面+小心得

一、前言

本文仅用于记录笔者自己的登录界面设计，可能会存在于纰漏。

在qt创建好项目后，会有以下目录和文件，除了resources是笔者自己创建的资源文件，用来存放和引用项目所需的图片。接下来会以文件顺序，罗列项目的整个构造。

二、项目

1、界面设计

界面设计包含登录界面logindlg.ui和主界面mainwindow.ui。主界面没什么好说的，不是这次的重点。在项目名字处右键新建文件，选择qt一项，选择qt设计师界面类，选择Dialog without Buttons，随后自命名文件名，会自动生成.h，.cpp，.ui：

创建好后，在logindlg.ui上面拖拽控件，设计自己的界面。 

登录界面和控件如下：

包含label、push button和lineEdit控件

其中最上面的图标是先创建了resources资源文件（项目中的所有图片均需上传，除了程序图标），在项目上右键，选择qt一项，创建资源文件.qrc：

命好名，一路确定后，会自动弹出一个界面，就可以上传图片了。不过要先添加前缀，前缀就是一个目录，然后才能选择上传的图片：

---

随后可以在设计界面上传图片和在.cpp上面上传文件。

图片上传后有两种引用的方式：设计师界面引用和.cpp上面引用。

设计师界面引用：

选择一个存放图片的控件，如label，拖拽至指定位置，删去控件自带的文字，右键控件，选择更改样式表，选择添加资源，添加image，便可以找到自己想要上传的照片：

 这种方法，优点是方便、快捷，缺点是，如果对图片有额外的需求，这样操作是不够的。

.cpp中引用：

可在控件，如lineedit，添加图片，并制定位置等格式（属于初始化段）：

（该功能可在lineedit左侧显示图标，并有默认提示字）

//用户名图标
    QAction *pLeadindAction_login = new QAction(this);
    QImage login_icon(":/logo/usename.png");//图片引用，在对应图片旁右键选择copy path可复制路径
    pLeadindAction_login->setIcon(QIcon(QPixmap::fromImage(login_icon.scaled(32,32, Qt::KeepAspectRatio,Qt::SmoothTransformation))));//设置大小和焦点
    ui->lineEdit_1->addAction(pLeadindAction_login, QLineEdit::LeadingPosition);
    //默认提示字
    ui->lineEdit_1->setPlaceholderText("用户名：");
    ui->lineEdit_1->installEventFilter(this);

效果图：

 

2、项目文件.pro

这里主要是对整个项目的配置，包括但不限于OpenCV、sqlite，以及程序图标等。直接在里面输入对应代码即可。

3、头文件.h

功能包括但不限于，定义.cpp所需的函数、变量等。

private slots:
    void on_pushButton_1_clicked();//点击“注册”的事件处理

    void on_pushButton_2_clicked();//点击“登录”的事件处理

    void showEvent(QShowEvent *);//窗口默认失去焦点

public slots:
    bool eventFilter(QObject *,QEvent *);//失去和获得焦点

4、源文件.cpp

该文件是具体的实现，本例中，.ui是前端，具体响应是.cpp。

在ui(new Ui::LoginDlg)中，可设计窗口初始化时的一些状态，比如图片地址、控件属性和焦点事件等。在外部就可以写头文件中声明的函数的具体实现了。例如按钮点击事件。

void LoginDlg::on_pushButton_2_clicked()//点击“注册”的事件处理
{
    //先判空，再看重不重复，如果都ok，最后才插入
    QString user = ui->lineEdit_1->text().trimmed();
    QString pw = ui->lineEdit_2->text().trimmed();
    //是否用户名重复
    QSqlQuery info;
    QString S =QString("select * from user where usename='%1'").arg(user);
    info.exec(S);
    if (user.isEmpty())
    {
        QMessageBox::warning(this, "警告", "用户名不能为空，请重新输入!");
        ui->lineEdit_1->setFocus();//当前窗口焦点在用户名一栏
    }
    else if(pw.isEmpty())
    {
        QMessageBox::warning(this, "警告", "密码不能为空，请重新输入!");
        ui->lineEdit_2->setFocus();//当前窗口焦点在密码一栏
    }
    else if(info.next())
    {
        //若第一条sql语句成立，则表示重复
        QMessageBox::warning(this, "警告", "用户名重复,请重新输入");
        ui->lineEdit_1->setFocus();//当前窗口焦点在用户名一栏
    }
    else
    {
        //以上错误条件都失败，即表明可以注册
        S = QString("insert into user(usename,password) "
                      " VALUES ('%1', '%2' )")
                .arg(user).arg(pw);
        info.exec(S);
        qDebug()<<"insert successful";//返回至控制台信息
        ui->lineEdit_1->clear();
        ui->lineEdit_2->clear();
        ui->lineEdit_1->setFocus();
        QMessageBox::information(this ,tr("提示") , tr("注册成功!"));
    }

tips：

1. 第一次程序创建成功后，会在release或debug文件下，自动生成对应的db文件，下次再启动不会再创建。 打包的时候，使用release下最新的exe。
2. 可以用sqlite expert personal查看数据库中的信息，直接拖拽db文件就行。 qt自带了sqlite，可在main.cpp中创建数据库，也可以额外写一个源文件来存放。