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

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

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

閑話少說，進入正題。

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

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

最終的成果如下圖所示：

一、畫虎先畫骨

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

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

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

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

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

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

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

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

二、準備素材

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

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

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

直接使用setIcon()方法進行圖標設(shè)置，例如：

self.qq_icon.setIcon(QtGui.QIcon('./qq_hover.svg')) 在QSS中編寫樣式引用圖標文件，例如：

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

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

三、完善細節(jié)

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

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

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

窗口邊框的隱藏

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

self.setWindowFlags(QtCore.Qt.FramelessWindowHint)

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

取消掉窗口邊框之后，窗口與外界之間就沒有的隔離的標志，我們可以重寫繪制一個窗口的邊框線，但是TIM使用的是窗口陰影的方式來突出和隔離界面，所以咱們也使用陰影的方式來實現(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編寫出來的登錄圖形界面效果如下圖所示：

文章版權(quán)所有：州的先生博客，轉(zhuǎn)載必須保留出處及原文鏈接

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

以上就是Python制作一個仿QQ辦公版的圖形登錄界面的詳細內(nèi)容，更多關(guān)于python 圖形登錄界面的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！