QT 实现类似于qq的登录注册界面

QT 实现类似于qq的登录界面（仅供参考）

看一下效果图

一：首先创建一个widget项目设计ui界面

使用了LineEdit，QPushButton，QToolButton，QLabel，还有弹簧还有一个widget组件

这是LineEdit设置提示 username 和password
注册按钮和— X都是运用了QToolButton 注册按钮勾选了autoRasie可以使按键透明

1…1因想要达到同态背景的效果也就是加载gif所以运用了QLabel组件
在.CPP文件中利用QMovie 代码如下

 //把窗口边框去除   这是去除原来的关闭边框 setWindowFlags(Qt::FramelessWindowHint | windowFlags());//把窗口背景设置为透明;setAttribute(Qt::WA_TranslucentBackground);QMovie *movie=new QMovie(":/1.gif");//加载的资源文件中的路径ui->label->setMovie(movie);movie->start(); ui->label->show();

这就需要添加资源文件了：
首先右键文件家找到Add New 点击选择QT 选择resource file资源文件
然后按你喜好命名点击下一步
再点击完成
选择add prefix（增加前缀）一般输入 “/” 然后选择add files添加你需要的文件（要确保文件在你的项目文件夹中）一开始可能不会出现先crtl+b编译一下
如果不小心退出右键 res.qrc 选择 open in Editor 可以重新进去添加前缀和文件的界面

然后设计样式表也就是在ui界面右键选择改变样式表让界面美观一些

 QLineEdit{font-size:16px;border-style:outset;border-radius:10px;font-style:MingLiU-ExtB;}QPushButton{background-color: rgb(0, 255, 255);border-style:outset;border-radius:10px;font-style:MingLiU-ExtB;}QPushButton:pressed{background-color:rgb(224,0,0);border-style:inset;font-style:MingLiU-ExtB;

因为我把控件放进了新建的widget中所以无法拖拽所以需要增加一个鼠标按下并移动的事件
在widget.h中增加两个事件的声明和创建一个点

 protected:void mouseMoveEvent(QMouseEvent *e);//鼠标移动void mousePressEvent(QMouseEvent *e);//鼠标按下移动private:Ui::QQ *ui;QPoint p;//创建一个点

然后在widget.cpp中注意文章中的QQ::是我项目的名称（因人而异的）

#include<QMouseEvent>
.....
void QQ::mousePressEvent(QMouseEvent *e)
{if(e->button() == Qt::LeftButton){//求坐标差值//当前点击坐标-窗口左上角坐标p = e->globalPos() - this->frameGeometry().topLeft();}
}
void QQ::mouseMoveEvent(QMouseEvent *e)
{if(e->buttons() & Qt::LeftButton){//移到左上角move(e->globalPos() - p);}
}

1…2 把—（缩小）X（关闭）的功能完善
在ui界面中选择转到槽选择clicked（）方法会自动在头文件中进行声明然后在 .cpp文件中进行事件的处理（或者使用connec 来连接信号和槽可使用lamda函数）

在.cpp文件中

void QQ::on_toolButton_4_clicked()
{this->close();
}void QQ::on_toolButton_3_clicked()
{showMinimized();
}

1…3 实现界面的跳转运用QDialog对话框可实现
首先右键文件家找到Add New 选择QT

下一步

下一步

在完成即可无需修改任何东西可能版本不同格式不一
然后在注册的ui界面中进行布局按你个人喜好这里我就直接添加背景图片了
改变样式表 border-image选择这个才可以平铺

QDialog{border-image: url(:/1.gif);}

1…4 实现界面的跳转
在最初的ui界面中选择注册然后转到槽用clicked（）方法跳转到注册界面这需要包括注册界面的头文件

#include "dialog.h"
......
void QQ::on_bt_register_clicked()
{Dialog dia;dia.show();dia.exec();
}

1…5这里先完成了界面的框架和样式（借助于各种资料编写，望各位见谅），接下来进行逻辑的判断和数据库的搭建（运用qt自带的sql数据库进行操作，我暂时还遇到一些问题，）