手把手教你实现漂亮的Qt 登录界面

前言

最近在使用qt5，qt creator做一个管理系统类的项目，自然需要用到登录界面，故记录一下登录界面的制作。其中一些功能的实现也得益于之前qt5基础视频不规则窗口部分的学习。

手把手教你实现漂亮的登录界面

首先看一下成品。

第一步、新建一个qwidget项目

没必要用qmainwin精品笑话dow,不需要那些菜单，一般用qwidget就可以，注意勾选ui。

第二步、添加界面组件

1、添加容器

调整容器为合适大小，同时调整整个画布为合适大小。

2、添加按钮，标签，文字组件

构思：
账号密码部分使用input wid新春联欢会主持词gets：line edit
logo和忘记密码使用两个display widgets：textlabel
是否记住我选择一个buttons：checkbox
登录按钮使用buttons:pushbutton

3、修改组件名称

首先修改line edit默认文本属性，分别点击两个lineedit修改文本属性为urname和password。

然后其他的按钮文本标签直接双击修改名称即可。

以上两步之后，可以得到这个样子（这里统一在wighets右边的菜单里修改过字体，一会可以通过样式表统一去改）。

4、添加样式表

类似于css，qt具有qss，最为关键的一步就是添加样式表。在frame容器外 画布内 右键改变样式表，输入以下代码。

*{background:rgb(255, 物质是什么意思255, 255);font-size:15px;font-style:mingliu-extb;}qframe{border:sold 10px rgba(0,0,0);background-image:url(h:/gui_design/day04/image/login_blue5);//背景}qlineedit{color:#8d98a1;background-color:#405361;font-size适合结婚的歌曲:16px;border-style:outt;border-radius:10px;font-style:mingliu-extb;}qpushbutton{background:#ced1d8;border-style:outt;border-radius:10px;font-style:mingliu-extb;}qpushbutton:presd{background-color:rgb(224,0,0);border-style:int;font-style:mingliu-extb;}qcheckbox{background:rgba(85,170,255,0);color:white;font-style:mingliu-extb;}qlabel{background:rgba(85,170,255,0);color:white;font-style:mingliu-extb;font-size:14px;}

背景部分找“度娘”就可以。

应用样式表后展示。

第三步、实现最小化窗口和关闭窗口功能

1、添加最小化和关闭窗口按钮

按钮选择buttons:tool button,最小化采用-，关闭窗口采用x。

2、按钮转到槽

将两个按钮都转到槽。

3、代码示例

转到槽之后，只需要在相应的函数里添加clo()和showminimized()功能即可。具体的代码如下。

widget.h

#ifndef widget_h#define widget_h#include <qwidget>qt_begin_namespacenamespace ui { class widget; }qt_end_namespaceclass widget : public qwidget{    q_objectpublic:    widget(qwidget *parent = nullptr);    ~widget();private slots:    void on_toolbutton_clicked();    void on_toolbutton_2_clicked();private:    ui::widget *ui;};#endif // widget_h

main.cpp

#include "widget.h"#include <qapplication>int main(int argc, char *argv[]){    qapplication a(argc, argv);    widget w;    w.show();    return a.exec();}

widget.cpp

#include "widget.h"#include "ui_widget.h"widget::widget(qwidget *parent)    : qwidget(parent)    , ui(new ui::widget){    ui->tupui(this);}widget::~widget(){    delete ui;}//核心代码就这几行void widget::on_toolbutton_clicked(){    clo();}void widget::on_toolbutton_2_clicked(){    showminimized();}

调整画布到合适大小

展示如下:

这个时候我们还需要把widget自带的上边框去掉，并且去掉背景。

第四步、隐藏widget窗口边框和背景

widget.cpp文件中添加如下两句代码即明年可。

widget::widget(qwidget *parent)    : qwidget(parent)    , ui(new ui::widget){    ui->tupui(this);    //去窗口边框        twindowflags(qt::framelesswindowhint | windowflags());    //把窗口背景设置为透明;        tattribute(qt::wa_translucentbackground);}

第五步、实现界面可移动

需要添加一个鼠标移动和鼠标按下事件。以*e来获取鼠标移动或按下。
main.cpp

#include "widget.h"#include <qapplication>int main(int argc, char *argv[]){    qapplication a(argc, argv);    widget w;    w.show();    return a.exec();}

widget.h

#ifndef widget_h#define widget_h#include <qwidget>qt_begin_namespacenamespace ui { class widget; }qt_end_namespaceclass widget : public qwidget{    q_objectpublic:    widget(qwidget *parent = nullptr);    ~widget();protected:    void moumoveevent(qmouevent *e);//鼠标移动    void moupresvent(qmouevent *e);//鼠标按下移动private slots:    void on_clo_clicked();    void on_minimized_clicked();private:    ui::widget *ui;     qpoint p;};#endif // widget_h

widget.cpp

#include "widget.h"#include "ui_widget.h"#include <qpainter>#include <qmouevent>widget::widget(qwidget *parent)    : qwidget(parent)    , ui(new ui::widget){    ui->tupui(this);    //去窗口边框        twindowflags(qt::framelesswindowhint | windowflags());    //把窗口背景设置为透明;        tattribute(qt::wa_translucentbackground);}widget::~widget(){    delete ui;}void widget::moupresvent(qmouevent *e){    if(e->button() == qt::leftbutton)    {        //求坐标差值        //当前点击坐标-窗口左上角坐标        p = e->globalpos() - this->framegeometry().topleft();    }}void widget::moumoveevent(qmouevent *e){    if(e->buttons() & qt::leftbutton)    {        //移到左上角        move(e->globalpos() - p);    }}void widget::on_clo_clicked(){    clo();}void widget::on_minimized_clicked(){    showminimized();}

参考：

/d/file/titlepic/p%3e%3cp%3e%e5%88%b0%e6%ad%a4%e8%bf%99%e7%af%87%e5%85%b3%e4%ba%8e%e6%89%8b%e6%8a%8a%e6%89%8b%e6%95%99%e4%bd%a0%e5%ae%9e%e7%8e%b0%e6%bc%82%e4%ba%ae%e7%9a%84qt 登录界面的文章就介绍到这了,更多相关qt 登录界面内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！