03——驾校科目一考试系统——登录界面

双击ui文件进入设计模式。
想要把我们的登录窗口做成什么样的效果呢？理想效果图如下所示：用户需要一个账号和密码输入。最后还需要给用户两个按钮：一个登录按钮，一个取消按钮。

需求分析

本节先把界面实现好，分析需求：
两个标签：账号、密码。
两个输入框
两个按钮

添加标签

回到设计模式，将两个标签加上。可以使用鼠标移动两个label标签的位置，也可以使用键盘的上下左右键来调整位置。

改变标签的名字。双击标签。或者选中标签选择标签属性修改。

添加输入框

添加按钮

可以鼠标调整或者通过属性进行调整。

运行项目——初始版本

问题:设计界面和生成大小不同的。

解决方案

在 main.cpp 中加入以下语句。注意：要加在 main()函数中最开始的位置，如下面的例子：

#if (QT_VERSION >= QT_VERSION_CHECK(5,9,0))
    QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

运行，成功解决

添加功能——补充背景图

做好准备，添加标签

可以通过再添加一个标签的方式来添加图片。拖一个label标签覆盖整个页面，因为是图片所以去掉文本。

添加资源

先把资源准备好。我是将图片放到项目里面的。

添加图片到资源。从设计模式切换到编辑模式。右键单击项目，然后选择添加新文件

选择 QT->Qt Resource File

设置资源名字。我设置的是 img。下一步。

然后点击完成

添加前缀

删除前缀其他的名字，只留下 / 即可。然后再点击添加按钮，单击添加文件。

此时会弹出一个文件框，让我们选择文件。此时我们选择准备好的资源文件即可。

此时图片文件资源成功加入进来了。注意：记得保存一下。

此时资源已经成功的加载进来了，此时回到设计模式。此时要给背景标签添加资源了。此时这个label是label_3。然后在属性编辑区找到QLabel这个类的属性。
用送鼠标单击有三个点的按钮。

选中要用的资源。ok

运行项目——成功添加背景图

缺点：背景图片盖住了登录界面。

这可不是我们想要的。
原因是因为这个标签把之前给挡住了。QT中的标签是有顺序的。所以我们需要将其作为背景。

将图片当做背景

解决方案：首把这个图片标签第一个放进去。

此时这个图片在界面上的效果就没有了

将此图片标签设置为账号，然后顶替掉之前的账号位置，之前的账号将其名字清空拉大当做资源文件，以同样的方式引入图片即可。

运行项目——成功实现背景图

完成效果

缺点：图片和窗口大小不一致

但是图片周边还有空隙不好控制，该怎么设置呢?这就涉及到集合到几何属性了。

几何属性

需要有三个东西的宽和高一致，具体属性如下所示：

  图片的宽和高
  放置图片的label标签
  对话框

如果这三者的宽和高一致的话，就不会出现缝隙了。

回到编辑模式开始代码的编辑：

进入到构造函数，将空隙的问题进行解决。

标签有个方法可以设置自己的填充属性。
那么界面信息上面的空间我们怎么去访问呢？通过 ui指针。因为ui指向的是描述界面信息的这个类对象。
所以我们通过 ui来访问界面上的控件。

使用ui前，先给控件设置好名字是关键。

回到编辑模式,编写代码。详细的注释我的代码上面都有。仔细看代码注释即可。

编写代码 logindialog.cpp

#include "logindialog.h"
#include "ui_logindialog.h"

LoginDialog::LoginDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::LoginDialog)
{
    //setupUi初始化界面方法
    ui->setupUi(this);

    //解决空隙
    /*
    标签有个方法可以设置自己的填充属性。
    那么界面信息上面的空间我们怎么去访问呢？通过 ui指针。因为ui指向的是描述界面信息的这个类对象。
    所以我们通过 ui来访问界面上的控件。
    使用ui前，先给控件设置好名字是关键。
    */

    //ui通过标签属性访问到图像然后调用 setScaledContents方法选择是否填充。true(填充)、false(不填充)
    ui->imgLabel->setScaledContents(true);
    //设置填充之后，我们还需要设置当前窗体的宽和高，需要和标签一致的大小。
    this->resize(ui->imgLabel->width(),ui->imgLabel->height());//使用resize重新设置整个窗体的大小 (width,height)

}

LoginDialog::~LoginDialog()
{
    //析构进行自然回收
    delete ui;
}

运行项目

(如果左上角依旧有空白，请在设计模式中的QWidget中选择geometry将X与Y都设置为0即可)。再通过鼠标拖动，将位置拖好看一点（也可以不拖，主要是为了美观）。

改善意见：改变标题

但是窗体标题和？风格我们不太需要，所以在对窗口进行优化。

//logindialog.cpp增加代码
    //设置窗口风格   方法太长怎么办？真的一个一个敲？可以通过缩写 如设置标题：sWT(输入首字母)就能直接出来了。
    this->setWindowTitle("驾校科目一考试登录");//设置标题
    //设置一个普通的对话框,问号我们就不需要了，再加一个关闭按钮即可。
    this->setWindowFlags(Qt::Dialog|Qt::WindowCloseButtonHint);

至此界面设计工作到此完成。

完整代码 logindialog.cpp

其他几个没发的就和之前一样即可，不用改动。

#include "logindialog.h"
#include "ui_logindialog.h"
#include<QtWidgets>

LoginDialog::LoginDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::LoginDialog)
{
    //setupUi初始化界面方法
    ui->setupUi(this);

    //解决空隙
    /*
    标签有个方法可以设置自己的填充属性。
    那么界面信息上面的空间我们怎么去访问呢？通过 ui指针。因为ui指向的是描述界面信息的这个类对象。
    所以我们通过 ui来访问界面上的控件。
    使用ui前，先给控件设置好名字是关键。
    */

    //ui通过标签属性访问到图像然后调用 setScaledContents方法选择是否填充。true(填充)、false(不填充)
    ui->imgLabel->setScaledContents(true);
    //设置填充之后，我们还需要设置当前窗体的宽和高，需要和标签一致的大小。
    this->resize(ui->imgLabel->width(),ui->imgLabel->height());//使用resize重新设置整个窗体的大小 (width,height)

    //设置窗口风格   方法太长怎么办？真的一个一个敲？可以通过缩写 如设置标题：sWT(输入首字母)就能直接出来了。
    this->setWindowTitle("驾校科目一考试登录");//设置标题
    //设置一个普通的对话框,问号我们就不需要了，再加一个关闭按钮即可。
    this->setWindowFlags(Qt::Dialog|Qt::WindowCloseButtonHint);

}

LoginDialog::~LoginDialog()
{
    //析构进行自然回收
    delete ui;
}

快速写出方法小技巧

方法太长怎么办？真的一个一个敲？可以通过缩写 如设置标题：setWindowTitle方法只需要输入sWT(输入首字母)就能直接出来了。

下一篇预告

驾校科目一考试系统——实现登陆功能（邮箱验证）。