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实现方便使用的级联进度信息实例
May 05 Python
python基于pyDes库实现des加密的方法
Apr 29 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
Jul 10 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
Mar 20 Python
Selenium鼠标与键盘事件常用操作方法示例
Aug 13 Python
如何分离django中的媒体、静态文件和网页
Nov 12 Python
django xadmin action兼容自定义model权限教程
Mar 30 Python
基于Python脚本实现邮件报警功能
May 20 Python
浅谈Python 函数式编程
Jun 20 Python
python利用appium实现手机APP自动化的示例
Jan 26 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
Apr 07 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
Dec 24 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 empty() 检查一个变量是否为空
2011/11/10 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python实现126邮箱发送邮件
2020/05/20 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
java字符串格式化输出实例讲解
2021/01/06 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
大学生开西餐厅创业计划书
2014/02/01 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
检讨书范文
2015/01/27 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书