1 创建项目

新建项目，选择Qwidget项目，使用qmake（更加简单）

选择MinGW构建

2 移动项目文件

对项目文件进行移动，新建一个cell文件夹存放界面的代码，同时在里边新建一个cell.pri文件

然后修改代码，找到bookmg.pro，将其他没用的删除，添加上cell的路径\include($$PWD/cell/cell.pri)\，然后右击bookmg项目执行qmake，此时项目里会出现cell，在右击cell添加现有文件，将其他文件放入

在新建一个lib文件夹用于存放逻辑，操作和cell一样

3 界面设计

3.1 登陆界面设计

右击cell-添加新文件-qt设计器类-Dialog without Buttons。

拖入一个weiget，先栅格布局填满，让后将这些像素改为0

搭建一个主界面

3.2 改变控件样式

右击对象里边的diglog_login-改变样式，注意自己的命名

QLabel#lb_title{font:40px '黑体';}
QLabel#lb_username,QLabel#lb_password{font:20px '楷体';}
QLineEdit{border-radius:4px;min-height:28px;border:1px solid black}
QPushButton{border-radius:4px;background: #409eff; color:white;font -size:14px;}
QWidget#widget{background:white;}

需要查询相关样式可以在这个网站按f12查询，可以找到一些相关的样式

https://element.eleme.cn/#/zh-CN/component/installation

3.3主界面设计

搭设界面，使用按钮和stackwidget（可以翻页的widget），改变样式表QWidget#tool QPushButton{border:none; background-color: rgb(84,92,100); color: white;min-height:55px; font:14px ‘黑体’;padding-left:10px }

3.4 添加图标

在这里可以找图标 (阿里巴巴矢量图库)[https://www.iconfont.cn/],
在项目目录新建一个res存放svg图片。右键项目添加新文件，qtres

随后添加前缀，添加文件

为了把图标添加到文字的旁边，我们需要把pushbutton更改为toolbutton，同时修改样式里的QPushButton为QToolButton,选中四个按钮，在icon那里点击黑色小三角选择资源，找到刚才的图片，此时发现只显示图片，文字没了。

需要修改样式，修改为图标在文本旁边

添加一个按下的样式QWidget#tool QToolButton:checked{background:rgb(67,74,80);}同时打开按钮的可按下，能够看到两个颜色是不一样的，那个是当前页面，那个就是黑一点的

把左边全部改黑QWidget#tool{background-color: rgb(84,92,100);

4 编写简易登陆代码

在main主函数添加上原来的登陆头文件，实例化登陆界面

#include "cell_main.h"

#include <QApplication>
#include "dialog_login.h"
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog_login dlg;
    dlg.exec();
    Cell_Main w;
    w.show();
    return a.exec();
}

右击登陆按钮，转到槽，点击事件，对代码进行编写

void Dialog_login::on_btn_login_clicked()
{
    //1是成功，2是失败，0是退出    
    setResult(1);
    this->hide();
}

void Dialog_login::on_pushButton_2_clicked()
{
    setResult(0);
    this->hide();
}

我们再到主函数对逻辑进行书写

#include "cell_main.h"
#include <QApplication>
#include "dialog_login.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Dialog_login dlg;
    int ret = dlg.exec();

    // 如果对话框返回值为1，则显示主窗口
    if (ret == 1)
    {
        Cell_Main w;
        w.show();
        return a.exec();
    }
    // 如果对话框返回值为0，则退出程序
    else if (ret == 0)
    {
        exit(0);
        return 0;
    }
    return 0;
}