維基少兒:樹莓派/樹莓派製作圖形使用者介面 (GUI)

Laura Sach @codeboom – CC-BY-SA 4.0

本研討會探討了使用guizero庫建立簡單的 Python 圖形介面。

guizero本身是Tkinter圖形介面庫的替代方案，Tkinter圖形介面庫包含在Python中。

設定和安裝

您可以透過從終端執行pip3命令來安裝guizero庫，這是推薦的方式。

pip3 install guizero

或者，網站上有一個Microsoft Windows安裝程式：https://lawsie.github.io/guizero/

你的第一個GUI

從程式設計選單中開啟Python 3
點選檔案>新建檔案，建立一個空白視窗，您將在其中編寫您的程式碼。
將以下原始碼新增到您的檔案中。
儲存檔案，然後按 F5 執行程式碼。您應該看到一個基本的 GUI！

from guizero import App, Text
app = App("My first GUI")
greeting = Text(app, "Hello!")
app.display()

讓我們看看程式碼行做了什麼

from guizero import App, Text

告訴 Python 我們想從guizero中使用 App 和 Text。

app = App("My first GUI")

建立應用程式（方框部分）並將“我的第一個 GUI”一詞放在標題中。

greeting = Text(app, "Hello!")

建立Text（灰色部分中的“Hello！”一詞）並將其新增到應用程式中。每當我們在guizero中建立新內容時，我們總是將其新增到應用程式中，以便它出現在螢幕上。

app.display()

顯示應用程式，並執行迴圈以更新應用程式（以防有任何更改）。這行程式碼始終位於最後。

美化文字

這個文字有點無聊！您可以透過新增一些其他引數來更改文字的大小、顏色和字型。

找到這行程式碼。

greeting = Text(app, "Hello!")

新增另一個引數將顏色更改為紅色（注意美式拼寫）。

greeting = Text(app, "Hello!", color="red")

您可以透過在引數之間新增逗號來新增更多引數，如下所示

圖片

圖片必須為 GIF 格式才能在 GUI 上顯示。要顯示在 GUI 上的所有專案程式碼必須放在這兩行程式碼之間。

app = App("My first GUI")
# Put your code for text, pictures etc. here
app.display()

匯入類 - from guizero import App, Text , Picture
確保您在與 Python 檔案相同的資料夾中儲存了一個 GIF 圖片。
將這行程式碼新增到您的應用程式中（將 cat.gif 替換為您的圖片的檔名）。

pic = Picture(app, "cat.gif")

遺憾的是，guizero無法顯示動畫 GIF。😟

按鈕

您可以新增一個按鈕，如下所示

透過新增到最上面一行來匯入類。

from guizero import App, Text, Picture , PushButton

在程式開頭，就在import語句之後，編寫一個函式，該函式將在按下按鈕時被呼叫。我們的示例函式名為do_stuff，但您可以根據自己的喜好命名它（不要在名稱中使用空格或標點符號）。

def do_stuff():
  print("You pressed the button ")

確保列印行透過按 Tab ↹ 鍵進行縮排 - 這很重要！

將按鈕程式碼新增到兩行應用程式程式碼之間，就像圖片一樣。

button1 = PushButton(app, do_stuff, text="Push me")

透過按 F5 執行您的程式。點選按鈕，檢視 Python shell - 您應該看到一條訊息，顯示"您按下了按鈕"。

挑戰 - 貓咪名字生成器

按下按鈕後，您隨機生成的“貓咪名字”將顯示在下方。

更改您的 GUI，使其看起來像這樣。您應該能夠透過更改您已經擁有的程式碼來找出如何做到這一點。您可以使用自己的圖片！
在程式開頭新增import random這一行，以便我們可以隨機選擇貓咪的名字。
在按鈕下方新增以下程式碼以建立一些文字。這就是貓咪的名字將顯示的地方，但我們還不知道它是哪個，所以現在我們只是把"..."放在這裡。

cat_name = Text(app, text="...")

在您的現有程式中找到def do_stuff():這行程式碼。用以下程式碼替換print("您按下了按鈕")這行程式碼，以從列表中隨機選擇貓咪的第一個名字。如果您喜歡，可以新增更多不同的名字！

first_name = random.choice(["Fluffy", "Al", "Ginger", "Princess"])

在它下面再寫一行程式碼，隨機選擇貓咪的姓氏。確保以last_name =開頭，這樣我們才能區分它們。

現在新增一行程式碼將它們連線在一起，並將結果設定在您之前建立的cat_name文字中。

cat_name.set(first_name + " " + last_name)

儲存並執行您的程式，然後按下按鈕，發現您的貓咪化身！

下一步是什麼？

guizero的官方網站有用於建立圖形使用者介面 (GUI) 應用程式的文件。作者設計它用於“高階專案”：https://lawsie.github.io/guizero/

樹莓派基金會發布了一本關於guizero的免費 PDF 書籍，名為使用 Python 建立圖形使用者介面 (2020)，作者是 Martin O'Hanlon 和 Laura Sach：https://magpi.raspberrypi.org/books/create-guis

檔案

cat.gif

finished-cat-name-generator.py

# What is your cat name?
# Randomly generates a cat name and displays it on a gui
# Requires guizero - sudo pip3 install guizero

from guizero import App, Text, Picture, PushButton
import random

def cat_name():
    first_name = random.choice(["Mr", "Fluffy", "Whiskers", "Ginger", "Tiddles", "Tabitha", "Princess"])
    last_name = random.choice(["Bigglesworth", "Snugglybottom", "Padfoot", "McTickles", "Floofyface", "Longtail", "Fluffball", "Hairball", "Fishbreath"])
    cat_name.set(first_name + " " + last_name)


app = App("What's your cat name?")

greeting = Text(app, "Your cat name is...", color="green", size="36")

pic = Picture(app, "cat.gif")
generate_name = PushButton(app, cat_name, text="Tell me")

cat_name = Text(app, text="...")


app.display()