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

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

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

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

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

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

最終的成果如下圖所示：

一、畫虎先畫骨

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

首先，整個(gè)登錄界面，由2塊組成：

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

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

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

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

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

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

二、準(zhǔn)備素材

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

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

準(zhǔn)備好圖標(biāo)之后，我們就可以在代碼中使用了。對(duì)于這些圖標(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)顏色、各個(gè)組件之間的間距、對(duì)齊方式都需要我們進(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)志，我們可以重寫繪制一個(gè)窗口的邊框線，但是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編寫出來的登錄圖形界面效果如下圖所示：

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

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

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