這篇文章將為大家詳細(xì)講解有關(guān)教你使用Python制作一個仿QQ辦公版的圖形登錄界面，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)與策劃設(shè)計,楚雄州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:楚雄州等地區(qū)。楚雄州做網(wǎng)站價格咨詢:18982081108

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

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

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

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

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

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

最終的成果如下圖所示：

一、畫虎先畫骨

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

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

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

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

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

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

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

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

二、準(zhǔn)備素材

圖標(biāo)在現(xiàn)代軟件設(shè)計中的作用越來越大，恰當(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"))

名稱欄目：教你使用Python制作一個仿QQ辦公版的圖形登錄界面-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/dhpjii.html