秦皇岛网站建设汉狮怎么样,asp网站制作软件,wordpress导航页面模板下载地址,网页翻译算切屏吗最近#xff0c;QQ的办公版本——TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式#xff0c;看起来更加的清爽、简洁和高效了。这种界面州的先生还是比较喜欢的#xff0c;没有QQ那么花里胡哨#xff0c;也比微信那些残缺的功能更加丰富。并且这次的登录界面还新…最近QQ的办公版本——TIM进行了一次更新升级。本次更新升级大幅修改了界面的样式看起来更加的清爽、简洁和高效了。这种界面州的先生还是比较喜欢的没有QQ那么花里胡哨也比微信那些残缺的功能更加丰富。并且这次的登录界面还新增了微信登录的选项看来 TIM 还打算从微信那边争取一部分用户过来。闲话少说进入正题。州的先生看到这个出自大厂的图形界面程序不由得想用 Python 的图形界面模块来实现一个。在上古时代前端开发还是被称为“切图仔”的岗位那时候的一个练手方式就是使用手写 HTML 和 CSS 来模仿各个网站的样式。同样的要想把桌面图形程序写得精美、好看对优秀桌面图形界面程序进行模仿必不可少。今天咱们就来使用 Python 的图形界面模块 PyQt5 模仿实现最新版本的 TIM 的登录界面。最终的成果如下图所示文章目录一、画虎先画骨在动工之前我们先来分析和设计一下这个登录界面的结构。TIM 原始的界面布局咱们无从得知但是根据呈现出来的样式咱们可以确定自己按照什么结构的组织这个登录界面。首先整个登录界面由2块组成左侧的宣传图片右侧的功能按钮左侧的宣传图片没啥功能点咱们可以直接用一个背景图片搞定右侧的功能按钮则分了很多类和层级顶部的程序控制按钮组中部的QQ/微信登录方式图标切换组中下部的表单输入框组底部的选项控制组基于此咱们综合选择网格布局、垂直布局和水平布局来排列各个控件。然后登陆界面的各个子模块和功能按照如下图所示来选择 PyQt5 中的控件这样登录界面的结构就完成了。二、准备素材图标在现代软件设计中的作用越来越大恰当的图标使用可以增强界面的视觉美观和交互友好。在TIM的登录界面中也是使用的很多的图标来表示各个功能的操作比如设置按钮、关闭按钮、切换按钮、账号选择按钮、登录按钮等。在此我们通过著名的阿里巴巴在线矢量图标库——IconFont 来获取所需的图标文件经过选择最终下载得到准备好图标之后我们就可以在代码中使用了。对于这些图标文件有两种使用方式直接使用 setIcon() 方法进行图标设置例如self.qq_icon.setIcon(QtGui.QIcon(./qq_hover.svg))在QSS中编写样式引用图标文件例如QPushButton#setting_icon{border-image: url(./setting.svg);}上述两种方式我们根据实际的情况都使用了。三、完善细节在界面结构搭建好之后按钮图标准备和使用上之后剩下的就是边边角角的细节优化和美化了。色彩、间距的调整TIM的登录界面主体上采用了灰色的字体颜色还有QQ/微信登录切换的图标颜色、各个组件之间的间距、对齐方式都需要我们进行细致的调整。这些通过 QSS 、控件的 setFixedSize() 方法和布局的 setAlignment() 方法都可以完美实现。窗口边框的隐藏将窗口默认的工具栏边框隐藏掉然后使用自定义的按钮来实现窗口的控制self.setWindowFlags(QtCore.Qt.FramelessWindowHint)窗口阴影的实现取消掉窗口边框之后窗口与外界之间就没有的隔离的标志我们可以重写绘制一个窗口的边框线但是TIM使用的是窗口阴影的方式来突出和隔离界面所以咱们也使用阴影的方式来实现shadow QtWidgets.QGraphicsDropShadowEffect(self,blurRadius9.0,colorQtGui.QColor(116, 116, 116),offsetQtCore.QPointF(0, 0))window.setGraphicsEffect(shadow)四、成果展示最终使用 Python 模仿TIM编写出来的登录图形界面效果如下图所示
