03——驾校科目一考试系统——登录界面（1)：https://developer.aliyun.com/article/1415872
运行项目——成功添加背景图
缺点：背景图片盖住了登录界面。
原因是因为这个标签把之前给挡住了。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(输入首字母)就能直接出来了。
下一篇预告
驾校科目一考试系统——实现登陆功能（邮箱验证）。
