[Python教學] Tkinter:常見元件 - 建構溝通界面

更新於 發佈於 閱讀時間約 5 分鐘

嘿,大家好!上次我們實作出了一個簡單的視窗,雖然有點空蕩蕩,但至少它會乖乖出現對吧?這次我們要讓它變得熱鬧一點,丟幾個實用的「元件」(就是按鈕、文字框之類的東西)進去,讓我們的視窗開始有點互動的感覺。準備好了嗎?來啦!


元件是啥?為啥重要?

在 Tkinter 裡,元件(Widgets)就是那些你能在視窗裡看到的東西,像按鈕(Button)、標籤(Label)、輸入框(Entry)等等。它們是視窗的靈魂,讓你可以跟程式「溝通」。沒這些元件,視窗就像個空殼,完全沒戲唱啊!

今天我們要玩三個最基本的:

  • Label:放文字的地方,像是個小告示牌。
  • Button:按下去會做事的那個按鈕。
  • Entry:讓你輸入文字的小框框。

這些是 Tkinter 的「基本三兄弟」,學會它們你就跨出一大步啦!


先來個簡單的:加個標籤

我們先從最簡單的 Label 開始,丟個文字進視窗裡瞧瞧:

import tkinter as tk

# 開個視窗
window = tk.Tk()
window.title("我的互動視窗")
window.geometry("300x200")

# 加個標籤
label = tk.Label(window, text="哈囉,我是標籤!")
label.pack() # 用 pack() 放進視窗

window.mainloop()

跑一下看看,視窗裡是不是多了一行「哈囉,我是標籤!」?

raw-image


  • tk.Label(window, text="..."):這就是在視窗(window)裡創建一個標籤,文字自己定。
  • pack():這招是告訴標籤「你給我乖乖排好」,它會自動出現在視窗裡,通常是靠上居中。

想讓標籤更帥一點?可以改改樣子:

label = tk.Label(window, text="哈囉,我很酷!", font=("微軟正黑體", 16), fg="blue", bg="yellow")
label.pack()

這下標籤變成藍字黃底,還用 16 號的微軟正黑體,是不是有點活潑起來了?

raw-image



加個按鈕:點下去有反應

光看文字有點無聊,我們來加個按鈕,讓它被按的時候能耍點花樣:

import tkinter as tk

def button_click():
label.config(text="你按我啦!") # 按鈕被按時,標籤文字會變

# 開視窗
window = tk.Tk()
window.title("按鈕測試")
window.geometry("300x200")

# 標籤
label = tk.Label(window, text="按按看下面")
label.pack()

# 按鈕
button = tk.Button(window, text="點我", command=button_click)
button.pack()

window.mainloop()

跑起來後,點一下「點我」,標籤就變成「你按我啦!」了!

按鈕點擊前

按鈕點擊前

按鈕點擊後

按鈕點擊後


  • tk.Button(window, text="...", command=...):創建按鈕,command 後面接的是按下去要跑的函式。
  • label.config(text="..."):這招能動態改標籤的內容,超實用。


輸入框:讓你說話

最後來個 Entry,讓我們可以輸入東西:

import tkinter as tk

def show_input():
text = entry.get() # 拿到輸入框的內容
label.config(text=f"你輸入的是:{text}")

# 開視窗
window = tk.Tk()
window.title("輸入測試")
window.geometry("300x200")

# 標籤
label = tk.Label(window, text="請輸入點什麼")
label.pack()

# 輸入框
entry = tk.Entry(window)
entry.pack()

# 按鈕
button = tk.Button(window, text="送出", command=show_input)
button.pack()

window.mainloop()

試試看!輸入點東西(比如「工程師」),按下「送出」,標籤就會顯示「你輸入的是:工程師」。

raw-image


  • tk.Entry(window):創建一個輸入框。
  • entry.get():抓出輸入框裡的文字。


玩一玩:自己動手

好了,現在輪到你啦!試著寫個小程式,做到這些:

  1. 視窗標題設成「我的小玩具」。
  2. 加一個標籤,寫上「歡迎來玩」。
  3. 加一個輸入框,讓人可以輸入名字。
  4. 加一個按鈕,按下去時標籤會變成「嗨,[輸入的名字]!」。

做完跑跑看,輸入自己的名字試試,是不是很有成就感?

raw-image



結語

今天我們放了一些元件在視窗內:標籤會說話,按鈕會動,輸入框還能聽你講話。這些元件就像視窗的小助手,讓它從空殼變成能互動的工具。怎麼樣,覺得 Tkinter 越來越有趣了吧?

下次我們要聊「佈局管理」,教你怎麼把這些元件排得漂漂亮亮的,不再亂七八糟,我們下篇見啦!


留言
avatar-img
留言分享你的想法!
avatar-img
追極光的北極熊|軟體工程師的小天地
9會員
150內容數
歡迎來到我的部落格!這裡記錄了軟體工程師的日常生活點滴,並分享程式設計與演算法的實用教學。無論你是初學者還是有經驗的開發者,都能在這裡找到深入淺出的技術解析與實戰技巧。此外,我也會分享工作中的心路歷程與學習心得,讓你不僅學到技術,更能瞭解軟體開發的實際應用與挑戰。希望透過這個平台,能與你共同成長,激發對技術的熱情!
2025/04/28
當我們開發程式時,功能能正常運作固然重要,但在資料量變大或執行時間變長時,效能就成為不可忽視的一環。尤其在 Web 應用、資料分析或科學運算中,程式跑得快與否,直接影響使用者體驗與系統成本。
2025/04/28
當我們開發程式時,功能能正常運作固然重要,但在資料量變大或執行時間變長時,效能就成為不可忽視的一環。尤其在 Web 應用、資料分析或科學運算中,程式跑得快與否,直接影響使用者體驗與系統成本。
2025/04/22
嘿,大家好!上篇教學文章我們做出了一個待辦事項清單,已經有點小工具的感覺了吧?今天我們要再升級,來做個「簡單記事本」。這個專案不只可以寫東西,還能存檔、讀檔,甚至換字體大小,感覺就像自己寫了個迷你軟體!
2025/04/22
嘿,大家好!上篇教學文章我們做出了一個待辦事項清單,已經有點小工具的感覺了吧?今天我們要再升級,來做個「簡單記事本」。這個專案不只可以寫東西,還能存檔、讀檔,甚至換字體大小,感覺就像自己寫了個迷你軟體!
2025/04/16
嘿,大家好!走到這一步,我們已經玩過 Tkinter 的基本招式、佈局、事件處理,還搞了些進階元件,應該有點信心了吧?今天我們要把這些功夫練成一套連招,來做個實用的「待辦事項清單」(To-Do List),順便聊聊怎麼把程式寫得更漂亮、更好用。準備好了嗎?這就上場啦!
2025/04/16
嘿,大家好!走到這一步,我們已經玩過 Tkinter 的基本招式、佈局、事件處理,還搞了些進階元件,應該有點信心了吧?今天我們要把這些功夫練成一套連招,來做個實用的「待辦事項清單」(To-Do List),順便聊聊怎麼把程式寫得更漂亮、更好用。準備好了嗎?這就上場啦!
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
這篇內容,將簡單介紹Asset Browser、Workspace、Inspector、Code Browser,作為入門的介面導覽。
Thumbnail
這篇內容,將簡單介紹Asset Browser、Workspace、Inspector、Code Browser,作為入門的介面導覽。
Thumbnail
這個系列的教學會列出基本上所有常見的造型和一些基礎 , 讓各位可以自行搭配造型~在這個第四篇呢 , 我們會來一起了解:常見的窗口 / 框架造型定義他們的意思加了之後有什麼效果那就讓我們開始吧!
Thumbnail
這個系列的教學會列出基本上所有常見的造型和一些基礎 , 讓各位可以自行搭配造型~在這個第四篇呢 , 我們會來一起了解:常見的窗口 / 框架造型定義他們的意思加了之後有什麼效果那就讓我們開始吧!
Thumbnail
本文利用pyqt5,使用pyttsx3將QLineEdit(單行輸入框)的字串,轉成語音呈現出來。
Thumbnail
本文利用pyqt5,使用pyttsx3將QLineEdit(單行輸入框)的字串,轉成語音呈現出來。
Thumbnail
Anytype主要分為四區塊:目錄欄(Widget組成)、主編輯畫面、導航選單、設定區。
Thumbnail
Anytype主要分為四區塊:目錄欄(Widget組成)、主編輯畫面、導航選單、設定區。
Thumbnail
本篇教學將教你如何建立和使用 textbutton,讓你可以使用文字快速建立玩家可以點擊的按鈕,並提供瞭如何更改按鈕文字和自訂點擊按鈕後的動作。
Thumbnail
本篇教學將教你如何建立和使用 textbutton,讓你可以使用文字快速建立玩家可以點擊的按鈕,並提供瞭如何更改按鈕文字和自訂點擊按鈕後的動作。
Thumbnail
在Python中,import是一個關鍵字,用於將其他模組或套件中的程式碼引入到當前的程式中以供使用。 這個關鍵字允許你在你的程式中使用其他地方定義的變數、函式和類等。 當你使用import時,Python會搜索指定模組或套件的位置,並將其中的程式碼載入到你的程式中,這樣你就可以在程式中使用它們
Thumbnail
在Python中,import是一個關鍵字,用於將其他模組或套件中的程式碼引入到當前的程式中以供使用。 這個關鍵字允許你在你的程式中使用其他地方定義的變數、函式和類等。 當你使用import時,Python會搜索指定模組或套件的位置,並將其中的程式碼載入到你的程式中,這樣你就可以在程式中使用它們
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
當我們在撰寫一套系統的時候, 總是會提供一個介面讓使用者來觸發功能模組並回傳使用者所需的請求, 而傳統的安裝包模式總是太侷限, 需要個別主機獨立安裝, 相當繁瑣, 但隨著時代的演進與互聯網的崛起, 大部分的工作都可以藉由網頁端、裝置端來觸發, 而伺服端則是負責接收指令、運算與回傳結果, 雲端
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
Thumbnail
前言 現在的前端需求已經越來越高,要考慮HTML及CSS的切版美觀程度,以及React以及Flutter所提出的元件(Componet、widget)觀念,也就是將元件模組化,使元件可以更動態的被程式運行,而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度,讓任何使用元件的開發者
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News