使用Python編寫一個QQ辦公版的圖形登入介面!

pythonlaodi發表於2020-09-26

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

完整程式碼獲取

相關文章