最簡單的方式構(gòu)建 Tkinter 圖形界面

大家好，我是征哥，今天分享如何用最簡單的方式，為你的 Python 程序穿上漂亮的衣服，行話是用 Python 構(gòu)建漂亮的 GUI，GUI 就是 graphical user interface 的簡稱。

為什么要圖形界面呢？

前文最簡單的方式發(fā)布你的Python應(yīng)用中提到，程序員寫的軟件，最好給不懂技術(shù)的人使用，才更有價值，我們平時寫的 Python 程序，都是在一個叫作終端的黑窗口里運(yùn)行的，自己用當(dāng)然沒問題，給別人用，尤其是不懂技術(shù)的人，大都不怎么會操作那個黑窗口，因此，很有必要為我們的程序穿上漂亮的衣服-圖形界面。

程序有了有圖形界面，頓時顯得高大上，可以對別人說我寫了個小軟件了。從程序到軟件的過程看似只加了個圖形界面，實際上這一過程并不簡單，你需要學(xué)習(xí)各種的圖形界面庫，控件，事件，多線程等復(fù)雜的知識，還要學(xué)習(xí)如何設(shè)計，讓界面更美觀漂亮。

那么有沒有簡單一點的方法呢？

如果沒有，就不會有今天的文章了。

總的來說，分三步：

第一步：設(shè)計界面。

在 Figma 網(wǎng)站上通過拖拉拽的方式設(shè)計好圖形界面，不想自己設(shè)計也行，有別人設(shè)計好的，你可以直接使用，有些免費(fèi)，有些付費(fèi)。

第二步：自動生成界面對應(yīng)的代碼。

設(shè)計好后，復(fù)制對應(yīng)的網(wǎng)址，然后用 Python 程序 Tkinter Designer 自動生成你設(shè)計好的界面的 Tkinter 代碼（標(biāo)準(zhǔn)庫 Tkinter 是最受歡迎的圖形界面庫之一）。

第三步：修改代碼，添加業(yè)務(wù)邏輯。

圖形界面的代碼生成好了，接下來就是修改代碼，為一些按鈕，輸入框添加業(yè)務(wù)邏輯代碼。

好了，現(xiàn)在你可能有些疑問，啥是 Figma，Tkinter Designer 又是什么工具，怎么用的，現(xiàn)在我來一一解答。

什么是 Figma？

Figma 是一個基于瀏覽器的協(xié)作式 UI 設(shè)計工具，F(xiàn)igma 從推出至今越來越受到 UI 設(shè)計師的青睞，如今也有很多的設(shè)計團(tuán)隊投入了Figma 的懷抱。

簡單來說，設(shè)計師（美工）設(shè)計好原型，交給程序員去開發(fā)，程序員根據(jù)窗口大小、位置、顏色、按鈕等在一行一行編寫代碼，作為程序員，有沒有好累的感覺。

那么 Figma 設(shè)計一個界面難么？

我覺得不難，至少比在線 PhotoShop 要簡單，因為弄幾個輸入框，文本和按鈕就可以設(shè)計一個程序的界面，基本都是拖拉拽。如果要專業(yè)而美觀的設(shè)計，那就需要系統(tǒng)的學(xué)習(xí)了，不想學(xué)習(xí)也行，拿別人設(shè)計好的自己改改就可以了。

Tkinter Designer 是什么工具?

Tkinter Designer 就是將 Figma 設(shè)計的界面自動轉(zhuǎn)換成代碼的開源工具。最近更新日期是 6 天前，目前 GitHub 上有 1800+ 星，是個很熱門的項目，我在使用的過程中遇到了點小問題，提交了 ISSUE，作者不到一分鐘就回復(fù)了，非常積極和熱情。

如何使用 Tkinter Designer？

接下來是保姆級別的教程。

下載

安裝 TkInter Designer 是一個相當(dāng)簡單的過程，您所要做的就是克隆 Github 存儲庫：

git clone https://github.com/ParthJadhav/Tkinter-Designer

將目錄更改為該文件夾：

cd Tkinter-Designer

安裝依賴

pip3 install -r requirements.txt

執(zhí)行

python3 tkinter_designer.py

執(zhí)行上述腳本后，你將看到一個漂亮的 GUI 界面：

注冊 Figma，并設(shè)計一個界面

1、注冊并登錄。

打開 https://www.figma.com，點擊 Sign up 進(jìn)行注冊。

你可以使用 Google 賬戶直接登錄。

2、獲取 Token。

Token 就是 訪問 Figma API 的憑證，你只有一次機(jī)會看到它，看到時就復(fù)制并保存下來。

點擊右上角賬戶名稱那里，再點擊 setting：

找到 Personal access tokens，在下方的輸入框里面填寫 Personal access tokens 的標(biāo)識符，可以隨意填寫：

寫完直接按回車就可以看到一個類似這樣的 token，把它復(fù)制保存起來

196344-282fd2ea-***********-aad25a0f8cfe

3、設(shè)計一個界面：

登錄后，您要單擊右上角的 New 并創(chuàng)建一個新的設(shè)計文件：

只需要 3 秒就可以設(shè)計一個自己需要的界面：

設(shè)計的細(xì)節(jié)這里不再贅述，可以參考 Figma 的官方文檔，這里直接給一個我弄好的作為 demo：

該設(shè)計的鏈接：

https://www.figma.com/file/xNPw6pdKst9ONDn43crtVn/v1-Fixed-Community?node-id=1%3A416

直接打開這個鏈接就可以看到 UI 界面，可以修改后保存為自己的界面。這里說下如何獲取界面的鏈接，點擊 Share -> copy link，如下圖

基本流程就是選擇一個 Frame，在上面拖拉一些圖片，文本，矩形框，配置顏色，矩形框可以設(shè)計成文本輸入框，也可以做成按鈕，非常靈活。

需要注意的是，元素的命名是有要求的，如果是文本輸入框，命名必須是 TextBox，如果是按鈕，必須是 Button，除 Text 類型外，其他元素的名稱必須為以下 5 種：

生成代碼

python3 tkinter_designer.py

執(zhí)行上述腳本后，你將看到一個漂亮的 GUI 界面：

這里我們輸入前面獲取到的 Token ID, File URL, 選擇代碼的保存路徑，點擊 Generate:

然后查看生成的目錄：

代碼和圖片已經(jīng)生成好了，執(zhí)行:

python window.py

會看到我們設(shè)計好的界面已經(jīng)出來了，文本框可以輸入文本，按鈕的點擊函數(shù)也做好了：

接下來就是修改 window.py 文件，來實現(xiàn)自己的業(yè)務(wù)邏輯了。

最后的話

本文分享了一個簡單的設(shè)計軟件界面的方法，借助于 Tkinter Designer 工具將 Figma 的設(shè)計文件直接轉(zhuǎn)換成代碼，非常省時省力，提升效率，準(zhǔn)備 GUI 編程的朋友們可以嘗試一下。

如有問題，歡迎留言討論。

PS：公眾號底部菜單-我->我的留言，點擊可以跳轉(zhuǎn)，點擊藍(lán)色文章標(biāo)題，可以跳轉(zhuǎn)文章，從而找到自己留過言的文章。