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赋值操作方法分享
Mar 23 Python
让python在hadoop上跑起来
Jan 27 Python
python目录与文件名操作例子
Aug 28 Python
利用 Monkey 命令操作屏幕快速滑动
Dec 07 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
Jul 24 Python
在Python的一段程序中如何使用多次事件循环详解
Sep 07 Python
Python实现读取及写入csv文件的方法示例
Jan 12 Python
在Python中关于使用os模块遍历目录的实现方法
Jan 03 Python
python 基于TCP协议的套接字编程详解
Jun 29 Python
Win10+GPU版Pytorch1.1安装的安装步骤
Sep 27 Python
Python Django form 组件动态从数据库取choices数据实例
May 19 Python
TensorFlow保存TensorBoard图像操作
Jun 23 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python简单计算文件夹大小的方法
2015/07/14 Python
python连接mysql实例分享
2016/10/09 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python在每个字符后添加空格的实例
2018/05/07 Python
python实现换位加密算法的示例
2018/10/14 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
python 穷举指定长度的密码例子
2020/04/02 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python实现简单的2048小游戏
2021/03/01 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
银行求职推荐信范文
2013/11/30 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js