Python制作一個仿QQ辦公版的圖形登錄界面

更新時間：2020年09月22日 08:42:21 作者：州的先生

這篇文章主要介紹了Python制作一個仿QQ辦公版的圖形登錄界面，幫助大家更好的理解和使用python，感興趣的朋友可以了解下

最近，QQ的辦公版本——TIM進(jìn)行了一次更新升級。本次更新升級大幅修改了界面的樣式，看起來更加的清爽、簡潔和高效了。

這種界面州的先生還是比較喜歡的，沒有QQ那么花里胡哨，也比微信那些殘缺的功能更加豐富。

并且這次的登錄界面還新增了微信登錄的選項(xiàng)，看來 TIM 還打算從微信那邊爭取一部分用戶過來。

閑話少說，進(jìn)入正題。

州的先生看到這個出自大廠的圖形界面程序，不由得想用 Python 的圖形界面模塊來實(shí)現(xiàn)一個。在上古時代，前端開發(fā)還是被稱為“切圖仔”的崗位，那時候的一個練手方式就是使用手寫 HTML 和 CSS 來模仿各個網(wǎng)站的樣式。

同樣的，要想把桌面圖形程序?qū)懙镁馈⒑每?，對?yōu)秀桌面圖形界面程序進(jìn)行模仿必不可少。今天，咱們就來使用 Python 的圖形界面模塊 PyQt5 模仿實(shí)現(xiàn)最新版本的 TIM 的登錄界面。

最終的成果如下圖所示：

一、畫虎先畫骨

在動工之前，我們先來分析和設(shè)計(jì)一下這個登錄界面的結(jié)構(gòu)。TIM 原始的界面布局咱們無從得知，但是根據(jù)呈現(xiàn)出來的樣式，咱們可以確定自己按照什么結(jié)構(gòu)的組織這個登錄界面。

首先，整個登錄界面，由2塊組成：

左側(cè)的宣傳圖片
右側(cè)的功能按鈕

左側(cè)的宣傳圖片沒啥功能點(diǎn)，咱們可以直接用一個背景圖片搞定；右側(cè)的功能按鈕則分了很多類和層級：

頂部的程序控制按鈕組
中部的QQ/微信登錄方式圖標(biāo)切換組；
中下部的表單輸入框組；
底部的選項(xiàng)控制組；

基于此，咱們綜合選擇網(wǎng)格布局、垂直布局和水平布局來排列各個控件。

然后，登陸界面的各個子模塊和功能按照如下圖所示來選擇 PyQt5 中的控件：

這樣，登錄界面的結(jié)構(gòu)就完成了。

二、準(zhǔn)備素材

圖標(biāo)在現(xiàn)代軟件設(shè)計(jì)中的作用越來越大，恰當(dāng)?shù)膱D標(biāo)使用可以增強(qiáng)界面的視覺美觀和交互友好。在TIM的登錄界面中，也是使用的很多的圖標(biāo)來表示各個功能的操作，比如設(shè)置按鈕、關(guān)閉按鈕、切換按鈕、賬號選擇按鈕、登錄按鈕等。

在此，我們通過著名的阿里巴巴在線矢量圖標(biāo)庫——IconFont 來獲取所需的圖標(biāo)文件，經(jīng)過選擇，最終下載得到：

準(zhǔn)備好圖標(biāo)之后，我們就可以在代碼中使用了。對于這些圖標(biāo)文件，有兩種使用方式：

直接使用setIcon()方法進(jìn)行圖標(biāo)設(shè)置，例如：

self.qq_icon.setIcon(QtGui.QIcon("./qq_hover.svg"))

在QSS中編寫樣式引用圖標(biāo)文件，例如：

QPushButton#setting_icon{
  border-image: url("./setting.svg"); 
}

上述兩種方式，我們根據(jù)實(shí)際的情況，都使用了。

三、完善細(xì)節(jié)

在界面結(jié)構(gòu)搭建好之后，按鈕圖標(biāo)準(zhǔn)備和使用上之后，剩下的就是邊邊角角的細(xì)節(jié)優(yōu)化和美化了。

色彩、間距的調(diào)整

TIM的登錄界面主體上采用了灰色的字體顏色，還有QQ/微信登錄切換的圖標(biāo)顏色、各個組件之間的間距、對齊方式都需要我們進(jìn)行細(xì)致的調(diào)整。這些通過 QSS 、控件的setFixedSize()方法和布局的setAlignment()方法都可以完美實(shí)現(xiàn)。

窗口邊框的隱藏

將窗口默認(rèn)的工具欄邊框隱藏掉，然后使用自定義的按鈕來實(shí)現(xiàn)窗口的控制；

self.setWindowFlags(QtCore.Qt.FramelessWindowHint)

窗口陰影的實(shí)現(xiàn)

取消掉窗口邊框之后，窗口與外界之間就沒有的隔離的標(biāo)志，我們可以重寫繪制一個窗口的邊框線，但是TIM使用的是窗口陰影的方式來突出和隔離界面，所以咱們也使用陰影的方式來實(shí)現(xiàn)：

shadow = QtWidgets.QGraphicsDropShadowEffect(self,
  blurRadius=9.0,
  color=QtGui.QColor(116, 116, 116),
  offset=QtCore.QPointF(0, 0))
window.setGraphicsEffect(shadow)

四、成果展示

最終，使用 Python 模仿TIM編寫出來的登錄圖形界面效果如下圖所示：