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

最近，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,
  blurRadius=9.0,
  color=QtGui.QColor(116, 116, 116),
  offset=QtCore.QPointF(0, 0))
window.setGraphicsEffect(shadow)

四、成果展示

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

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

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

以上就是Python制作一个仿QQ办公版的图形登录界面的详细内容，更多关于python 图形登录界面的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)

    从最简单的Web浏览器的登录界面开始,登录界面如下: 进行Web页面自动化测试,对页面上的元素进行定位和操作是核心.而操作又是以定位为前提的,因此,对页面元素的定位是进行自动化测试的基础. 页面上的元素就像人一样,有各种属性,比如元素名字,元素id,元素属性(class属性,name属性)等等.webdriver就是利用元素的这些属性来进行定位的. 可以用于定位的常用的元素属性: id name class name tag name link text partial link text xp

  • Python PyQt5运行程序把输出信息展示到GUI图形界面上

    概述:最近在赶毕业设计,遇到一个问题,爬虫模块我用PyQt5写了图形界面,为了将所有的输出信息都显示到图形界面上遇到了问题. 先演示一下效果最终效果吧,下面两张图用来镇楼.可以看到我们图形界面和程序运行的返回的信息是一样的,并且成功把数据展示到图形界面.   1.怎么获取输出信息.eg:我们平时用编译器,例如pycharm,运行的时候,会有很多信息,或者直接在cmd窗口输入命令的时候,也有同样信息.例如我启动数据库. cmd窗口下执行命令返回的信息 Pycharm运行的效果 我就想把这种类似输出

  • python如何实现读取并显示图片（不需要图形界面）

    在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片.本人偏爱 matpoltlib,因为它的语法更像 matlab. 一.matplotlib 1. 显示图片 import matplotlib.pyplot as plt # plt 用于显示图片 import matplotlib.image as mpimg # mpimg 用于读取图片 import numpy as np lena = mpimg.imread('lena.png')

  • python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例

    在pyqt5编程过程中,经常会遇到输入或选择多个参数的问题,把多个参数写到一个窗口中,主窗口会显得很臃肿,所以,一般是添加一个按钮,调用对话框,在对话框中进行参数的选择,关闭对话框将参数返回给主窗口 pyqt提供了一些标准的对话框类,用于输入数据,修改数据,更改应用的设置等,常见的有QFileDialog,QInputDialog,QColorDialog, QFontDialog等,在不同的窗口之间传参数有两种常用的方式,一种在自定义对话框之间通过属性传参,另一种在窗口之间使用信号与槽机制传参

  • python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例

    在下面这3篇文章中我们给出了手工输入代码的信号与槽的使用方法,因为采用这种方法介绍时,会简单一些,如果使用Qt Designer来介绍这些功能,那么任何一个简单的功能都会使用xxxx.ui xxxx.py call_xxxx.py三个文件 来实现,这样内容会显得很乱 python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例 python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例 python GUI库图形界面开发之PyQt5信号与槽的高级

  • Python tkinter界面实现历史天气查询的示例代码

    一.实现效果 1. python代码 import requests from lxml import etree import re import tkinter as tk from PIL import Image, ImageTk from xpinyin import Pinyin def get_image(file_nam, width, height): im = Image.open(file_nam).resize((width, height)) return ImageT

  • Python Tkinter 简单登录界面的实现

    如下所示: from tkinter import * class Reg (Frame): def __init__(self,master): frame = Frame(master) frame.pack() self.lab1 = Label(frame,text = "账户:") self.lab1.grid(row = 0,column = 0,sticky = W) self.ent1 = Entry(frame) self.ent1.grid(row = 0,colu

  • Python Selenium实现无可视化界面过程解析

    无可视化界面的意义 有时候我们爬取网页数据,并不希望看其中的过程,只想看到最后的数据结果就可以了,这时候,***面就很有必要了! 代码如下 from selenium import webdriver from time import sleep #实现无可视化界面 from selenium.webdriver.chrome.options import Options #实现规避检测 from selenium.webdriver import ChromeOptions #实现无可视化界面

  • Python GUI编程学习笔记之tkinter界面布局显示详解

    本文实例讲述了Python GUI编程学习笔记之tkinter界面布局显示.分享给大家供大家参考,具体如下: 相关内容: pack 介绍 常用参数 使用情况 常用函数 grid 介绍 常用参数 使用情况 常用函数 place 介绍 常用参数 使用情况 常用函数 首发时间:2018-03-04 14:20 pack: 介绍: pack几何管理器按行或列打包小部件. 可以使用填充fill,展开expand和靠边side等选项来控制此几何体管理器. pack的排放控件的形式就像将一个个控件按大小从上到

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

    最近,QQ的办公版本--TIM进行了一次更新升级.本次更新升级大幅修改了界面的样式,看起来更加的清爽.简洁和高效了. 这种界面州的先生还是比较喜欢的,没有QQ那么花里胡哨,也比微信那些残缺的功能更加丰富. 并且这次的登录界面还新增了微信登录的选项,看来 TIM 还打算从微信那边争取一部分用户过来. 闲话少说,进入正题. 州的先生看到这个出自大厂的图形界面程序,不由得想用 Python 的图形界面模块来实现一个.在上古时代,前端开发还是被称为"切图仔"的岗位,那时候的一个练手方式就是使用

  • 用Python制作一个可以聊天的皮卡丘版桌面宠物

    用Python制作一个可以聊天的皮卡丘版桌面宠物

    目录 导语 开发工具 原理简介 步骤实现 导语 前段时间有小伙伴留言说想让我带大家写写桌面小挂件,今天就满足一下留过类似言的小伙伴的请求呗~不过感觉写桌面的挂历啥的没意思,就简单带大家做一只桌面宠物吧~ 废话不多说,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: PyQt5模块: 以及一些Python自带的模块 原理简介 既然要写个桌面宠物,首先当然是要找宠物的图片素材啦.这里我们使用的是来自shimiji这款手机APP上的宠物图片素材,例如皮卡丘: 我下了大约60多种

  • 使用Python制作一个数据预处理小工具(多种操作一键完成)

    使用Python制作一个数据预处理小工具(多种操作一键完成)

    在我们平常使用Python进行数据处理与分析时,在import完一大堆库之后,就是对数据进行预览,查看数据是否出现了缺失值.重复值等异常情况,并进行处理. 本文将结合GUI工具PySimpleGUI,来讲解如何制作一款属于自己的数据预处理小工具,让这个过程也能够自动化!最终效果如下 本文将分为三部分讲解: 制作GUI界面 数据处理讲解 打包与测试 主要涉及将涉及以下模块: PySimpleGUI pandas matplotlib 一.GUI界面制作 思路 老规矩,先讲思路再上代码,首先还是说一

  • python 制作一个gui界面的翻译工具

    python 制作一个gui界面的翻译工具

    一．准备工作 除了Tkinter,还需要google_trans_new,没有安装这个库的朋友,可以使用 pip install google_trans_new 安装一下. 二．预览 1.主界面 2.翻译 3.支持多种语言哦 三．源代码 设计流程很简单,这里就直接贴代码了 3.1 My_Translator-v2.0.py from tkinter import * from tkinter import messagebox from tkinter import ttk import py

  • 基于Python制作一个多进制转换工具

    基于Python制作一个多进制转换工具

    目录 前言 主要步骤 完整代码 前言 学习资料下载链接 提取码:tha8  进制转换计算工具含源文件 主要步骤 导入模块 import tkinter from tkinter import * import tkinter as tk from tkinter.ttk import * 整个框架的主结构 root = Tk() root.title('贱工坊-进制转换计算') # 程序的标题名称 root.geometry("580x400+512+288") # 窗口的大小及页面的

  • 一文教你利用Python制作一个生日提醒

    目录 1. 实战 1-1  安装依赖 1-2  创建数据表 1-3  查询数据 1-4  遍历,获取距离今天的天数 1-5  组装数据及消息推送 在国内,大部分人都是过农历生日,然后借助日历工具获取农历日期对应的阳历日期,以这一天来过生! 这里还有一个痛点,即:每一年的农历生日对应的阳历日期都不一样 本篇文章将教你利用 Python 制作一个简单的生日提醒 1. 实战 具体操作步骤如下 1-1  安装依赖 # 安装依赖 pip3 install zhdate pip3 install pymys

  • 使用python制作一个为hex文件增加版本号的脚本实例

    最近公司一个项目需要用到IAP升级,要求将APP的版本号在hex文件添加,于是尝试用python写一个脚本,运行之后可以自动增加版本号,并且日期都是当天的 import re import time #获取日期的数据及校验和 year = int(time.strftime("%y", time.localtime())) month = int(time.strftime("%m", time.localtime())) date = int(time.strft

  • 使用Python制作一个打字训练小工具

    使用Python制作一个打字训练小工具

    一.写在前面 说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码. 然而现实中的程序员呢?对于很多程序员来说,没有百度和 Google 解决不了的问题,也没有 ctrl + c 和 ctrl + v 实现不了的功能. 那么身为一个程序员,要怎么让自己看起来更加"专业"呢?答案就是加快自己的打字速度了,敲的代码可能是错的,但这个13却是必须装的! 然而还

  • 使用python制作一个解压缩软件

    python实现解压缩的重要模块就是--zipfile,其次是os 安装zipfile模块 首先得安装zipfile模块,打开cmd输入一下命令即可安装 pip install zipfile os是python自带的库,所以无需另外安装,直接 import 即可 编写核心代码 压缩文件核心代码: def zip_file(): zip_name = path.get() +'.zip' # 获取绝对路径然后给压缩文件加上.zip结尾 z = zipfile.ZipFile(zip_name,'

  • python制作一个简单的gui 数据库查询界面

    一.准备工作: 1.安装mysql3.7,创建一个test数据库,创建student表,创建列:(列名看代码),创建几条数据 (以上工作直接用navicat for mysql工具完成) 二.代码: import sys import tkinter as tk import mysql.connector as sql #--------------------查询函数--------------------------- def sql_connect(): listbox_show.del

随机推荐