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 Web框架Flask中使用百度云存储BCS实例
Feb 08 Python
Python函数式编程指南(二):从函数开始
Jun 24 Python
对python-3-print重定向输出的几种方法总结
May 11 Python
利用python如何处理百万条数据(适用java新手)
Jun 06 Python
python 筛选数据集中列中value长度大于20的数据集方法
Jun 14 Python
python统计字母、空格、数字等字符个数的实例
Jun 29 Python
python assert的用处示例详解
Apr 01 Python
Python 限定函数参数的类型及默认值方式
Dec 24 Python
在keras中获取某一层上的feature map实例
Jan 24 Python
基于Python生成个性二维码过程详解
Mar 05 Python
Python Flask上下文管理机制实例解析
Mar 16 Python
Django url 路由匹配过程详解
Jan 22 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php debug 安装技巧
2011/04/30 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python中实现switch功能实例解析
2018/01/11 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python根据文本生成词云图代码实例
2019/11/15 Python
如何在 Django 模板中输出 "{{"
2020/01/24 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
鼓励运动员的广播稿
2014/02/08 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
秋天的雨教学反思
2014/04/27 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
工作时间调整通知
2015/04/24 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS