摘要：介紹一個動漫風(fēng)的表白小程序，界面使用Python以及PyQt實現(xiàn)，界面樣式經(jīng)過多次美化調(diào)整，使得整體清新美觀。本文詳細(xì)介紹代碼設(shè)計和實現(xiàn)過程，不僅是居家表白必備，而且適合新入門的朋友學(xué)習(xí)界面設(shè)計，完整代碼資源文件請轉(zhuǎn)至文末的下載鏈接。

前言

今年的520準(zhǔn)備寫一個表白程序，畢竟程序員一般都喜歡在這一天來點自己的特色，不過大多都是喜聞樂見的那一套代碼。雖然表白是用不上的，但是還是可以學(xué)習(xí)一番的，既然如此，不如來點賞心悅目的，那就有了這篇博文的內(nèi)容。想法是看到網(wǎng)上有個類似的移動按鈕的表白小程序，點子是好的，不過界面有些簡陋，我就自己重新設(shè)計了一個。從背景圖到按鈕制作都是用Photoshop和PPT設(shè)計的，三個界面的截圖如下：

風(fēng)格上是借鑒了B站的風(fēng)格和配色，包括背景的粉紅色、動漫人像等，當(dāng)然圖片主要來自網(wǎng)上，我利用Photoshop進(jìn)行了摳圖和美化處理。整體上依然保持博主一貫的清新簡約風(fēng)，不過既然是表白程序，主題當(dāng)然要粉紅甜蜜，至于細(xì)節(jié)之處大家也可以有自己的見解。

PS：表白有風(fēng)險，編碼需謹(jǐn)慎！表白程序只是趣味學(xué)習(xí)的代碼，真正表白還是應(yīng)該當(dāng)面表達(dá)心聲。盡管520已過，但是我還是補上這個代碼吧，希望大家都能找到心中所愛，勇往直前?。▌e問我520怎么不發(fā)，520誰敲代碼?。?/p>

1.?準(zhǔn)備工作

（一）設(shè)計思路

程序的設(shè)計思路是一個粉紅的表白界面，別人在打開程序后，可以點擊按鈕回應(yīng)：“我愛你”、“不愛你”，點同意彈出2號界面，即表白成功；若不同意，鼠標(biāo)滑動到“不愛你”按鈕，該按鈕自動跑開，別人是點擊不到的；如果不想選，點擊關(guān)閉窗口，則彈出3號窗口，請求再給一次機會。（其實有點無賴哈）

界面設(shè)計上，主界面用QtDesigner拖出背景l(fā)abel和兩個按鈕，另外兩個界面同樣的搭配Label和按鈕。在邏輯上，點擊“我愛你”按鈕彈出2號窗口；監(jiān)聽鼠標(biāo)位置，出現(xiàn)在“不愛你”附近則移動該按鈕的位置；修改關(guān)閉事件的槽函數(shù)，使其打開3號界面，忽視程序關(guān)閉。

（二）圖片準(zhǔn)備

準(zhǔn)備幾張?zhí)幚磉^的動漫圖片，需要用到具有透明背景的優(yōu)美圖片。一般難找到透明背景的，所以使用Photoshop將動漫人物主體摳出，摳出的人物圖片如下圖所示：

摳出人物主體的圖片可以任意疊加在界面中，更能體現(xiàn)立體感，至于摳圖軟件大家隨意，沒必要因為Photoshop就勸退。同樣的，我們以此摳出以下的幾張圖片，都是保存為透明背景的圖片。

?我們還需要準(zhǔn)備一些文字和按鈕，以下文字按鈕通過PPT制作，當(dāng)然Photoshop也是可以的，用什么軟件你開心就好，設(shè)計美觀就夠了。

2.?界面設(shè)計

界面采用QtDesigner設(shè)計，新建love520.ui文件，向界面中拖入4個Label控件，并擺置成如下圖所示的效果。并設(shè)置界面的qss樣式，包括按鈕的圖標(biāo)、label的背景圖等等。

設(shè)置MainWindow的樣式表如下，鼠標(biāo)劃過或選中時label和按鈕有抖動的效果：

對每個label設(shè)置各自的背景圖片，如label_2的背景樣式為下圖。依次打開label的styleSheet屬性，設(shè)置前面準(zhǔn)備的背景圖片。經(jīng)過樣式和背景圖片設(shè)置后，當(dāng)鼠標(biāo)滑動時圖片或按鈕有放大的效果，如下圖所示：

對于按鈕可以設(shè)置其icon屬性為前期設(shè)計的按鈕圖標(biāo)，調(diào)整尺寸并設(shè)置樣式如下，主要是鼠標(biāo)懸停和點擊后的樣式情況，調(diào)整邊界值使其具有縮放效果。

對于點擊主界面關(guān)閉按鈕后需要彈出的子窗口，設(shè)計如下，包括動漫人物圖片、文字、按鈕的擺放如下，其qss樣式與主界面的類似，這里不再贅述。

同樣的點擊“我愛你”按鈕后，需要彈出的子窗口設(shè)計如下，這時就只有l(wèi)abel了，畢竟已經(jīng)得手了，可以給一個慶祝送花的界面。

3.?代碼編寫

界面準(zhǔn)備完畢，我們可以用PyUIC工具將上一節(jié)設(shè)計完成的ui文件轉(zhuǎn)換為py文件，這樣可以直接調(diào)用該窗口的類和方法。另外，使用PyRcc工具可以將ui文件中涉及的qrc資源文件轉(zhuǎn)換為py文件，方便對圖片背景等文件進(jìn)行讀取。這里是一種邏輯界面分離的方式，代碼邏輯和界面是分開的，這樣對界面進(jìn)行調(diào)整時，功能的邏輯代碼就無需多做調(diào)整。

（一）主窗口界面

主窗口導(dǎo)出的窗口界面代碼如下：

（二）關(guān)閉窗口彈窗

當(dāng)點擊主窗口關(guān)閉按鈕后，彈出的窗口界面代碼如下：

（三）按鈕點擊彈窗

點擊“我愛你”按鈕，彈出的子窗口界面代碼如下：

（四）界面窗口邏輯

要想實現(xiàn)前面演示的功能，需要調(diào)用以上三個窗口的類和方法，并添加一些額外的功能。由于邏輯界面分離，我們不會直接修改以上導(dǎo)出的代碼，這就要用到類繼承的方式。首先我們導(dǎo)入需要用到的依賴：

以上代碼最后三行分別表示導(dǎo)入關(guān)閉主界面的彈窗、主界面窗口、點擊按鈕彈窗的類。我們新建兩個類分別命名為CloseWindow、YesWindow，它們均繼承QDialog類，以及Ui_Dialog和Ui_YesDialog這兩個子窗口，初始化時繼承原有構(gòu)造方法，增加setupUi以及retranslateUi方法調(diào)用，以創(chuàng)建子窗口控件。然后重寫Ui_YesDialog中的close方法，使其關(guān)閉時關(guān)閉所有事件。

主窗口繼承QMainWindow和前面設(shè)計的Ui_MainWindow類，初始化方法中除了setupUi和retranslateUi方法，還實例化CloseWindow、YesWindow的對象，以便后面調(diào)用。為兩個按鈕綁定了事件的槽函數(shù)，分別是“我愛你”按鈕（toolButton）的點擊事件槽函數(shù)、“不愛你”按鈕（toolButton_2）的鼠標(biāo)事件監(jiān)聽。

以上代碼中設(shè)計的幾個方法，其功能如下：

1. trueEvent方法：toolButton按鈕被點擊時執(zhí)行該函數(shù)，顯示yesDialog（表白成功子窗口）界面，同時隱藏主界面；

2. eventFilter方法：首先判斷事件類型，當(dāng)鼠標(biāo)懸停移動時，將toolButton按鈕的位置移動到一定范圍的隨機坐標(biāo)，實現(xiàn)“不愛你”按鈕的跑路功能；

3. closeEvent方法：主界面的關(guān)閉按鈕被點擊時調(diào)用該方法，方法中顯示myDialog窗口，同時將關(guān)閉窗口事件忽略，即阻止窗口關(guān)閉；

4. center方法：此方法調(diào)用時可以將主界面移動到屏幕的中心位置。

（五）主程序的調(diào)用

以上類方法實現(xiàn)后，則可以調(diào)用MainWindow類，將主界面顯示在系統(tǒng)界面中。如下代碼實現(xiàn)代碼調(diào)用：

4.?下載鏈接

若您想獲得博文中涉及的實現(xiàn)完整全部程序文件（包括測試圖片、視頻，py, UI文件等，如下圖），這里已打包上傳至博主的百度云盤，有需要的朋友可關(guān)注本人B站或公眾號后，回復(fù)：love520?獲取。

Python版本：3.8，請勿使用其他版本，需要安裝的依賴：PyQt5 == 5.15.5

PS：可獨立運行的exe文件同樣包含在分享的完整代碼包中。

結(jié)束語

由于博主能力有限，博文中提及的方法即使經(jīng)過試驗，也難免會有疏漏之處。希望您能熱心指出其中的錯誤，以便下次修改時能以一個更完美更嚴(yán)謹(jǐn)?shù)臉幼?，呈現(xiàn)在大家面前。同時如果有更好的實現(xiàn)方法也請您不吝賜教。