Python制作一个仿QQ办公版的图形登录界面


Posted in Python onSeptember 22, 2020

最近,QQ的办公版本——TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式,看起来更加的清爽、简洁和高效了。

Python制作一个仿QQ办公版的图形登录界面

这种界面州的先生还是比较喜欢的,没有QQ那么花里胡哨,也比微信那些残缺的功能更加丰富。

并且这次的登录界面还新增了微信登录的选项,看来 TIM 还打算从微信那边争取一部分用户过来。

闲话少说,进入正题。

州的先生看到这个出自大厂的图形界面程序,不由得想用 Python 的图形界面模块来实现一个。在上古时代,前端开发还是被称为“切图仔”的岗位,那时候的一个练手方式就是使用手写 HTML 和 CSS 来模仿各个网站的样式。

同样的,要想把桌面图形程序写得精美、好看,对优秀桌面图形界面程序进行模仿必不可少。今天,咱们就来使用 Python 的图形界面模块 PyQt5 模仿实现最新版本的 TIM 的登录界面。

最终的成果如下图所示:

Python制作一个仿QQ办公版的图形登录界面

一、画虎先画骨

在动工之前,我们先来分析和设计一下这个登录界面的结构。TIM 原始的界面布局咱们无从得知,但是根据呈现出来的样式,咱们可以确定自己按照什么结构的组织这个登录界面。

Python制作一个仿QQ办公版的图形登录界面

首先,整个登录界面,由2块组成:

  • 左侧的宣传图片
  • 右侧的功能按钮

左侧的宣传图片没啥功能点,咱们可以直接用一个背景图片搞定;右侧的功能按钮则分了很多类和层级:

  • 顶部的程序控制按钮组
  • 中部的QQ/微信登录方式图标切换组;
  • 中下部的表单输入框组;
  • 底部的选项控制组;

基于此,咱们综合选择网格布局、垂直布局和水平布局来排列各个控件。

然后,登陆界面的各个子模块和功能按照如下图所示来选择 PyQt5 中的控件:

Python制作一个仿QQ办公版的图形登录界面

这样,登录界面的结构就完成了。

Python制作一个仿QQ办公版的图形登录界面

二、准备素材

图标在现代软件设计中的作用越来越大,恰当的图标使用可以增强界面的视觉美观和交互友好。在TIM的登录界面中,也是使用的很多的图标来表示各个功能的操作,比如设置按钮、关闭按钮、切换按钮、账号选择按钮、登录按钮等。

在此,我们通过著名的阿里巴巴在线矢量图标库——IconFont 来获取所需的图标文件,经过选择,最终下载得到:

Python制作一个仿QQ办公版的图形登录界面

准备好图标之后,我们就可以在代码中使用了。对于这些图标文件,有两种使用方式:

  • 直接使用setIcon()方法进行图标设置,例如:
self.qq_icon.setIcon(QtGui.QIcon("./qq_hover.svg"))
  • 在QSS中编写样式引用图标文件,例如:
QPushButton#setting_icon{
  border-image: url("./setting.svg"); 
}

上述两种方式,我们根据实际的情况,都使用了。

Python制作一个仿QQ办公版的图形登录界面

三、完善细节

在界面结构搭建好之后,按钮图标准备和使用上之后,剩下的就是边边角角的细节优化和美化了。

色彩、间距的调整

TIM的登录界面主体上采用了灰色的字体颜色,还有QQ/微信登录切换的图标颜色、各个组件之间的间距、对齐方式都需要我们进行细致的调整。这些通过 QSS 、控件的setFixedSize()方法和布局的setAlignment()方法都可以完美实现。

窗口边框的隐藏

将窗口默认的工具栏边框隐藏掉,然后使用自定义的按钮来实现窗口的控制;

self.setWindowFlags(QtCore.Qt.FramelessWindowHint)

窗口阴影的实现

取消掉窗口边框之后,窗口与外界之间就没有的隔离的标志,我们可以重写绘制一个窗口的边框线,但是TIM使用的是窗口阴影的方式来突出和隔离界面,所以咱们也使用阴影的方式来实现:

shadow = QtWidgets.QGraphicsDropShadowEffect(self,
  blurRadius=9.0,
  color=QtGui.QColor(116, 116, 116),
  offset=QtCore.QPointF(0, 0))
window.setGraphicsEffect(shadow)

四、成果展示

最终,使用 Python 模仿TIM编写出来的登录图形界面效果如下图所示:

Python制作一个仿QQ办公版的图形登录界面

 文章版权所有:州的先生博客,转载必须保留出处及原文链接

原文地址:https://zmister.com/archives/1590.html

以上就是Python制作一个仿QQ办公版的图形登录界面的详细内容,更多关于python 图形登录界面的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
在Python中操作时间之tzset()方法的使用教程
May 22 Python
Python实现识别手写数字大纲
Jan 29 Python
python实现requests发送/上传多个文件的示例
Jun 04 Python
Python将list中的string批量转化成int/float的方法
Jun 26 Python
解决django前后端分离csrf验证的问题
Feb 03 Python
简单了解Python生成器是什么
Jul 02 Python
python retrying模块的使用方法详解
Sep 25 Python
python实现淘宝购物系统
Oct 25 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
Jan 19 Python
Tensorflow的梯度异步更新示例
Jan 23 Python
python 中的@运算符使用
May 26 Python
深入理解pytorch库的dockerfile
Jun 10 Python
Python使用for生成列表实现过程解析
Sep 22 #Python
python实现发送带附件的邮件代码分享
Sep 22 #Python
使用Python绘制台风轨迹图的示例代码
Sep 21 #Python
利用python绘制中国地图(含省界、河流等)
Sep 21 #Python
python利用google翻译方法实例(翻译字幕文件)
Sep 21 #Python
python统计mysql数据量变化并调用接口告警的示例代码
Sep 21 #Python
python3.8动态人脸识别的实现示例
Sep 21 #Python
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
vue实现循环切换动画
2018/10/17 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python编程之多态用法实例详解
2015/05/19 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
生产车间实习自我鉴定
2013/09/23 职场文书
课外活动总结范文
2014/07/09 职场文书
初级党校心得体会
2014/09/11 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
销售合作意向书范本
2015/05/08 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python