前言
最近在使用qt5，qt creator做一个管理系统类的项目，自然需要用到登录界面，故记录一下登录界面的制作。其中一些功能的实现也得益于之前qt5基础视频不规则窗口部分的学习。
手把手教你实现漂亮的登录界面
首先看一下成品。
第一步、新建一个qwidget项目
没必要用qmainwindow,不需要那些菜单，一般用qwidget就可以，注意勾选ui。
第二步、添加界面组件
1、添加容器
调整容器为合适大小，同时调整整个画布为合适大小。
2、添加按钮，标签，文字组件
构思：
账号密码部分使用input widgets：line edit
logo和忘记密码使用两个display widgets：textlabel
是否记住我选择一个buttons：checkbox
登录按钮使用buttons:pushbutton
3、修改组件名称
首先修改line edit默认文本属性，分别点击两个lineedit修改文本属性为username和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:outset; border-radius:10px; font-style:mingliu-extb; } qpushbutton{ background:#ced1d8; 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; } 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、代码示例
转到槽之后，只需要在相应的函数里添加close()和showminimized()功能即可。具体的代码如下。
widget.h
#ifndef widget_h #define widget_h #include <qwidget> qt_begin_namespace namespace ui { class widget; } qt_end_namespace class widget : public qwidget { q_object public: 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->setupui(this); } widget::~widget() { delete ui; } //核心代码就这几行 void widget::on_toolbutton_clicked() { close(); } void widget::on_toolbutton_2_clicked() { showminimized(); }
调整画布到合适大小
展示如下:
这个时候我们还需要把widget自带的上边框去掉，并且去掉背景。
第四步、隐藏widget窗口边框和背景
widget.cpp文件中添加如下两句代码即可。
widget::widget(qwidget *parent) : qwidget(parent) , ui(new ui::widget) { ui->setupui(this); //去窗口边框 setwindowflags(qt::framelesswindowhint | windowflags()); //把窗口背景设置为透明; setattribute(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_namespace namespace ui { class widget; } qt_end_namespace class widget : public qwidget { q_object public: widget(qwidget *parent = nullptr); ~widget(); protected: void mousemoveevent(qmouseevent *e);//鼠标移动 void mousepressevent(qmouseevent *e);//鼠标按下移动 private slots: void on_close_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 <qmouseevent> widget::widget(qwidget *parent) : qwidget(parent) , ui(new ui::widget) { ui->setupui(this); //去窗口边框 setwindowflags(qt::framelesswindowhint | windowflags()); //把窗口背景设置为透明; setattribute(qt::wa_translucentbackground); } widget::~widget() { delete ui; } void widget::mousepressevent(qmouseevent *e) { if(e->button() == qt::leftbutton) { //求坐标差值 //当前点击坐标-窗口左上角坐标 p = e->globalpos() - this->framegeometry().topleft(); } } void widget::mousemoveevent(qmouseevent *e) { if(e->buttons() & qt::leftbutton) { //移到左上角 move(e->globalpos() - p); } } void widget::on_close_clicked() { close(); } void widget::on_minimized_clicked() { showminimized(); }
参考：
到此这篇关于手把手教你实现漂亮的qt 登录界面的文章就介绍到这了,更多相关qt 登录界面内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！
需要了解更多c/c++开发分享手把手教你实现漂亮的Qt 登录界面，都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/c-cdevelopment/965456.html