最近，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編寫出來的登入圖形介面效果如下圖所示：

完整程式碼獲取