Python桌面圖形程式美化的方法論

很多人都吐槽，使用 Tkinter、PyQt5等工具制作出來的圖形界面程式太醜了。既然覺得它醜，我們來想想，它為什麼會那麼醜。

功能性是開發的第一要務

每一個 Python 圖形界面庫都有它自有的功能特性和界面特性。一般來說，這些庫的開發者着重要考慮的是功能性的實作。比如、清單框、拖拽框、懸浮框、自定義控件、webview等。

一個圖形界面庫，受不受開發者的歡迎，首先在于它提供的功能是否全面和強大。

如果僅僅是炫酷和好看，如果功能上有所缺失，其應用也隻能在小範圍和特定領域内得到擁簇。會導緻一種“初遇時驚豔，永久後坑多”的狀态。

子產品提供的都是原生元件

為了便于了解，我們在這裡把桌面圖形界面的開發（以PyQt5為例）和Web前端開發進行一下不嚴謹的關聯對應。

PyQt5 中的各種控件（QPushButton、QLineEdit、QCheckBox等）對應于 HTML 中的各類元素标簽（ <a> 、 <p> 、 <h> ），用于基礎結構的編排。
PyQt5 中的 QSS 對應于 HTML 中的 CSS，用于對樣式的控件。
PyQt5 中的信号槽對應于 HTML 中的 JavaScript，用于對行為互動的控制。

在不引入任何 CSS 和 JavaScript 的情況下，HTML 中編寫的任何标簽，在浏覽器中顯示的都是最原始的形狀和樣式。

<html>
 
 <h1>州的先生</h1>
 
 <a href="https://zmister.com"></a>
 
 <input type="text" placeholder="表單輸入框" />
 
 <button>一個按鈕</button>
 
 <select>
 
 <option>一個選項</option>
 
 <option>兩個選項</option>
 
 </select>
 
</html>

複制

上述 HTML 代碼在浏覽器中将會顯示為如下圖所示：

是不是也是很醜不美觀？那就對了。沒有經過樣式定義的 HTML 标簽元素就是這樣醜。

而現代Web開發中，幾乎所有頁面的元素标簽都是依照設計原型，引用 UI 元件或自寫CSS，對界面的外觀進行美化的。

下圖是比較知名的前端 UI 庫 ElementUI 提供的按鈕元件：

通過審查元素，可以看到，其用 CSS 對按鈕元素進行了很多改造：

同理，在 Python 的圖形界面開發中，我們僅僅是使用了庫提供的原生控件和布局，将一個圖形界面元素的基礎架構建構出來了，并沒有對其樣式進行任何美化和修飾。這樣編寫出來的圖形界面程式，肯定會讓人覺得醜。

界面的美化的幾個關鍵點

通過上面對 Web 頁面的對應，我們知道了我們編寫的圖形界面程式為什麼不美觀。

如何解決，州的先生根據實際經驗給出如下的建議：

有一個好的設計原型

不是要大家去兼修 UI 設計，而是在建構一個圖形界面之前，對程式的布局，結構有一個清晰明确的原型。就算是使用網格布局，也應該設計好各個控件在網格的位置和距離。

在有原型之後，可以參考一下現有的消費端桌面軟體（QQ音樂之類的）或者上站酷之類的設計網站上看看專業 UI 設計師作品的樣式和色彩搭配。

在這裡，色彩搭配是一個雷區。好的色彩搭配讓程式界面賞心悅目，差的色彩搭配，讓人覺得粗制濫造。

充分利用QSS

Qt 提供了 QSS 這個特性讓開發者可以自定義小部件的外觀，其支援各種屬性、子狀态和控件。

充分利用好 QSS 來配置界面，圖形界面的美化工作可以完成 80% 到 90%。

QSS 支援很多種控件進行配置，由于清單過長，在此就不一一列舉出來。貼出 Qt 官方文檔中關于 Qt Style Sheets Reference 的連結，大家可以在上面檢視：

https://doc.qt.io/qt-5/stylesheet-reference.html

同時，Qt 官方文檔中還提供了很多控件使用 QSS 美化的示例，大家也可以參考一下，連結為：

https://doc.qt.io/qtforpython/overviews/stylesheet-examples.html

利用控件的自有屬性

QSS 能夠完成 80% 到 90% 的界面美化工作，但是還有 10% 到 20% 的場景，QSS 表示心有餘而力不足。

什麼場景呢？比如視窗邊框的處理、視窗預設三劍客（最小化、最大化、關閉）的處理。

面對這一類的處理，就得利用各個控件的自有屬性來配置了。如果知道控件的自有屬性有哪些呢？答案當然還是看文檔。在此個例子：

QProgressBar()是進度欄控件，它的預設樣式如下圖所示：

我們在官方文檔中可以看到它有如下的方法可供調用：

顯然，那幾個

set

開頭的方法，就是可以直接對控件進行配置的方法：

setAlignment() ：用于設定進度條的對其方式；
setFormat() ：用于設定進度條的文本格式；
setInvertedAppearance() ：用于設計進度條是否反轉增長；
setMaximum() ：用于設定進度條的最大值；
setMinimum() ：用于設定進度條的最小值；
setOrientation() ：用于設定進度條的布局，是水準還是垂直；

這樣，通過控件的自有屬性，我們可以對控件的那些QSS無法處理的基礎樣式進行自定義。

總而言之，需要多翻閱文檔。

最後，用一個 PyQt5 美化的音樂播放器界面鎮文，希望大家編寫的圖形界面程式都德藝雙馨，秀外慧中。