小狐狸事務所: 6月 2023

2023年6月29日星期四

料理實驗 : 水煮茄子不變黑秘訣

最近在臉書食譜社群看到有人分享水煮茄子不變黑的秘訣, 作法如下 :

茄子切段後對半切開, 水滾後再將茄子下鍋, 紫色朝下切口朝上, 這樣便能阻絕表皮與空氣接觸而氧化, 保持鮮豔的藍紫色. 鍋蓋可以蓋上也可不蓋 (蓋上較快煮熟), 也不需要放鹽或油, 用水煮至軟熟後即可盛盤.
醬料調製 : 蒜粒壓扁切碎, 九層塔葉洗淨切碎, 加入一小匙鹽, 糖, 薄鹽醬油, 少許香油與開水攪拌, 淋在煮熟的茄子上或用沾的亦可.

炎炎夏日, 這鮮豔的藍紫色水煮茄子蠻引動人食慾的.

市圖還書 10 本 (C & C++ 與理財書)

今天還了一批 C & C++ 的書 :

6 月初教完五堂 C 語言課覺得好累, 備課不累, 而是學生的學習態度讓我很累, 把這些書都還了吧, 短時間內不會用到 C.

2023年6月28日星期三

2023 年第 26 周記事

哇哇, 時序來到第 26 周, 一年已經過了一半, 查看退休計時器, 即將進入 8 年倒數 :

突然感覺到初老的恐慌啊!

芒果本周已經採得差不多了 (感謝小舅與舅媽幫忙), 樹上果子所剩不多, 周日下午小舅採了兩桶回去後, 我又拿了採果竿到後院籬笆外以及路邊去採, 同樣收穫了兩桶 :

周四端午節早上要祭祖, 我與菁菁, 水某周三晚上回到鄉下 (姊姊忙工作沒回高雄, 二哥確診休息), 因為菁菁與水某周五要上班, 故周四晚上載她們回高雄, 周六早上我又回鄉下, 總共跑了三趟. 因為這樣休四天都沒時間去鎮上買菜, 只好清一清冰箱的存貨, 結果周六傍晚琪大師與公子突然造訪才發現食材窘迫 (沒青菜了), 勉強才端出四樣菜來, 太寒酸了.

周日早上到市場順便去圖書館還書, 出來時經過全家門口跟擺豆腐攤的老闆買一杯豆花, 突然想到這家全家有霜淇淋機, 每次都看菁菁吃 (我開車啊), 何不吃看看到底哪裡好吃, 於是就進去買了一杯 (49 元), 坐在鄰近廣場的位置好好品嚐 :

想做的事情不要等有空, 人生要隨時都有空.

2023年6月24日星期六

Python 學習筆記 : 如何在 Tkinter 中使用 HTML

今天在 Youtube 看到下面這個教學影片, 介紹如何利用第三方套件 tkhtmlview 在 Tkiner 視窗中使用 HTML + CSS 語法來美化視窗內容與連結網站 :

# How To Use HTML In Your Tkinter App - Python Tkinter GUI Tutorial

我覺得這功能很實用, 那就依樣畫葫蘆來測試一番唄!

首先用 pip install 來安裝 tkhtmlview, 注意, 要用系統管理員身分開啟命令提示字元視窗 :

Microsoft Windows [版本 10.0.19045.3086]

C:\WINDOWS\system32>pip install tkhtmlview

Collecting tkhtmlview

Using cached tkhtmlview-0.2.0-py3-none-any.whl (10 kB)

Requirement already satisfied: Pillow<10.0.0,>=9.4.0 in c:\python311\lib\site-packages (from tkhtmlview) (9.5.0)

Collecting requests<3.0.0,>=2.28.2 (from tkhtmlview)

Using cached requests-2.31.0-py3-none-any.whl (62 kB)

Requirement already satisfied: charset-normalizer<4,>=2 in c:\python311\lib\site-packages (from requests<3.0.0,>=2.28.2->tkhtmlview) (3.1.0)

Requirement already satisfied: idna<4,>=2.5 in c:\python311\lib\site-packages (from requests<3.0.0,>=2.28.2->tkhtmlview) (3.4)

Requirement already satisfied: urllib3<3,>=1.21.1 in c:\python311\lib\site-packages (from requests<3.0.0,>=2.28.2->tkhtmlview) (2.0.3)

Collecting certifi>=2017.4.17 (from requests<3.0.0,>=2.28.2->tkhtmlview)

Using cached certifi-2023.5.7-py3-none-any.whl (156 kB)

Installing collected packages: certifi, requests, tkhtmlview

Successfully installed certifi-2023.5.7 requests-2.31.0 tkhtmlview-0.2.0

C:\WINDOWS\system32>

如果沒有用系統管理員身分開啟命令提示字元視窗, 則安裝時可能會出現無法寫入錯誤而失敗 :

Installing collected packages: urllib3, Pillow, idna, charset-normalizer, certifi, requests, tkhtmlview

WARNING: Failed to write executable - trying to use .deleteme logic

ERROR: Could not install packages due to an OSError: [WinError 2] 系統找不到指定的檔案。: 'C:\\Python311\\Scripts\\normalizer.exe' -> 'C:\\Python311\\Scripts\\normalizer.exe.deleteme'

目前 tkhtmlview 支援的 HTML 標籤尚未涵蓋全部 HTML5, 但常用的標籤例如 H1~H6, A, P 等都可使用, 參考教學文件 :

# https://pypi.org/project/tkhtmlview/

# https://github.com/bauripalash/tkhtmlview

1. 文字效果 :

下面範例使用 Label 元件來測試 H1~H6 的文字效果 :

測試 1 : 在 HTMLLabel 元件上顯示 HTML 的 H1~H6 文字效果

import tkinter as tk

from tkhtmlview import HTMLLabel

root=tk.Tk()

root.geometry('600x400')

html_1='<h1 style="color: red; text-align: center"> Hello World </h1>'

label_1=HTMLLabel(root, html=html_1)

label_1.pack()

label_1.fit_height()

html_2='<h2 style="color: green; text-align: center"> Hello World </h2>'

label_2=HTMLLabel(root, html=html_2)

label_2.pack()

label_2.fit_height()

html_3='<h3 style="color: blue; text-align: center"> Hello World </h3>'

label_3=HTMLLabel(root, html=html_3)

label_3.pack()

label_3.fit_height()

html_4='<h4 style="color: pink; text-align: center"> Hello World </h4>'

label_4=HTMLLabel(root, html=html_4)

label_4.pack()

label_4.fit_height()

html_5='<h5 style="color: cyan; text-align: center"> Hello World </h5>'

label_5=HTMLLabel(root, html=html_5)

label_5.pack()

label_5.fit_height()

html_6='<h6 style="color: black; text-align: center"> Hello World </h6>'

label_6=HTMLLabel(root, html=html_6)

label_6.pack()

label_6.fit_height()

root.mainloop()

此例使用 H1~H6 在 HTMLLabel 元件上顯示 6 種不同大小的標題, 注意, 連續用 pack() 將 HTMLLabel 放置到 root 容器時因為預設高度較大, 後面的元件會被推到是窗外而看不到, 因此必須呼叫 HTMLLabel 物件的 fit_height() 方法來調適元件高度, 結果如下 :

HTMLLabel 已支援多國語言 (即多位元組字元例如中文) , 若將上面程式中的 "Hello World" 改成 "你是在說哈囉嗎?" 結果如下 :

2. 顯示超連結 :

下面範例測試超連結 A 標籤 :

測試 2 : 在 HTMLLabel 元件上顯示超連結

import tkinter as tk

from tkhtmlview import HTMLLabel

root=tk.Tk()

root.geometry('400x200')

html_1='<a href="https://tw.yahoo.com/" target="_blank">雅虎奇摩</a>'

label_1=HTMLLabel(root, html=html_1)

label_1.pack(padx=5, pady=5)

label_1.fit_height()

html_2='<a href="https://www.google.com.tw/" target="_blank">Google</a>'

label_2=HTMLLabel(root, html=html_2)

label_2.pack(padx=5, pady=5)

label_2.fit_height()

html_3='<a href="https://chateverywhere.app/zh" target="_blank">Chat Everwhere</a>'

label_3=HTMLLabel(root, html=html_3)

label_3.pack(padx=5, pady=5)

label_3.fit_height()

root.mainloop()

此例在 HTMLLabel 元件上顯示 Yahoo, Google, 與 Chat Everywhere 的網址超連結, 由於使用了 target='_blank' 屬性, 因此點擊超連結會在瀏覽器中開啟新分頁來顯示網頁, 結果如下 :

這個功能在 Tkinter GUI 視窗需要連結網站時非常好用.

3. 顯示清單 :

tkhtmlview 支援 OL, UL, LI 等清單標籤, 例如 :

測試 3 : 在 HTMLLabel 元件上顯示清單超連結

import tkinter as tk

from tkhtmlview import HTMLLabel

root=tk.Tk()

root.geometry('400x400')

html='''

<ol>

<li><a href="https://www.google.com.tw/" target="_blank">Google</a></li>

<li><a href="https://chateverywhere.app/zh" target="_blank">Chat Everwhere</a></li>

</ol>

<ul>

<li><a href="https://www.google.com.tw/" target="_blank">Google</a></li>

<li><a href="https://chateverywhere.app/zh" target="_blank">Chat Everwhere</a></li>

</ul>

'''

label=HTMLLabel(root, html=html)

label.pack(padx=5, pady=5)

label.fit_height()

root.mainloop()

此例分別用 ol 與 ul 元素來呈現編號與無編號清單, 結果如下 :

4. 顯示圖片 :

接下來測試 IMG 標籤的圖片顯示功能, 主要是透過其 src 屬性來指定圖片來源, 可以是網址或圖片在本機中的相對路徑, 下面是顯示本機程式工作目錄例如 :

測試 4 : 在 HTMLLabel 元件上顯示圖片

import tkinter as tk

from tkhtmlview import HTMLLabel

root=tk.Tk()

root.geometry('800x700')

html_1='<img src="orchid.jpg">'

label_1=HTMLLabel(root, html=html_1)

label_1.pack(padx=5, pady=5, anchor=tk.CENTER)

label_1.fit_height()

html_2='<img src="https://raw.githubusercontent.com/yaohuang1966/yaohuang1966.github.io/main/images/orchid.jpg">'

label_2=HTMLLabel(root, html=html_2)

label_2.pack(padx=125, pady=5)

label_2.fit_height()

root.mainloop()

此例在視窗中放置兩張圖片, 第一張圖片來源為本機程式目錄下的 orchid.jpg; 第二張是放在 GitHub 的同一張圖片, 分別使用 anchor 與 padx 參數來控制圖片置中, 結果如下 :

可見 anchor 參數對於 HTMLLabel 上的圖片沒有作用, 只能用 padx 調整其水平位置. 另外, 用來給圖片加上文字標題的 figure 標籤目前也尚未支援.

5. 顯示表格 (支援度不全) :

tkhtmlview 對表格的支援還不足 (雖然 colspan 合併儲存格似乎可用), 連 border 都無法顯示, 例如下列範例 :

測試 5 : 在 HTMLLabel 元件上顯示表格

import tkinter as tk

from tkhtmlview import HTMLLabel

root=tk.Tk()

root.geometry('800x400')

html='''

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="3">合併儲存格</td>

</tr>

</table>'''

label=HTMLLabel(root, html=html)

label.pack(padx=5, pady=5)

label.fit_height()

root.mainloop()

此處用 border=1 設定表格邊框但無作用, 結果如下 :

希望未來 tkhtmlview 可以完善對 TABLE 的支援.

6. 用 HTMLText 與 HTMLRender 顯示 HTML 檔內容 :

除了用 HTMLLabel 元件直接顯示 HTML 碼外, tkhtmlview 也可以透過 HTMLRender 物件讀取外部 HTML 檔顯示於視窗中, 例如下面這個網頁 index.htm :

測試 6 : 用 HTMLRender 與 HTMLText 讀取 HTML 檔

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Hello World!</h2>

</body>

</html>

將其存放於程式工作目錄下, 然後執行下列程式碼 :

import tkinter as tk

from tkhtmlview import HTMLText, RenderHTML

root=tk.Tk()

root.geometry('800x500')

label=HTMLText(root, html=RenderHTML('index.htm'))

label.pack(padx=5, pady=5)

label.fit_height()

root.mainloop()

結果如下 :

但目前 HTMLRender 物件僅限於顯示英文資料, 無法像 HTMLLabel 那樣顯示中文內容, 例如若若將上面 index.htm 檔的 H2 標籤內容從 "Hello World!" 改為 "你是在說哈囉嗎?" 時就會顯示如下錯誤 :

UnicodeDecodeError: 'cp950' codec can't decode byte 0xa0 in position 142: illegal multibyte sequence

可能 HTMLRender 物件尚未支援 Unicode.

2023年6月23日星期五

露天購買威剛 DDR3 1600 8GB 記憶體

上週查出鄉下老家第二台桌機 (技嘉) 主機板上的記憶體規格為 DDR3 1600 後, 上露天找到下面這賣家有賣各品牌 DDR3 模組, 本想買與目前主板上同樣的 Kinston $300 元, 但過了一周賣掉了, 所以改買威剛 8GB :

# 桌機記憶體/低電壓 DDR3L 1600 8G 金士頓創見威剛十詮美光三星廣穎 $350

小七免運 350 元.

本想買廣穎 $300, 但看到下面這篇, 還是買威剛好了 :

# https://www.mobile01.com/topicdetail.php?f=489&t=5322132

Python 學習筆記 : 如何設定 Tkinter 視窗的圖標 (icon)

Tkinter 視窗預設的圖標 (icon) 是一個羽毛, 以下面簡單的空視窗程式為例 :

import tkinter as tk

from tkinter import ttk

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('測試') # 設定視窗標題

root.geometry('300x200') # 設定視窗尺寸

root.mainloop()

執行後可看到視窗左上角的預設羽毛圖標 :

如果要更改為自訂的圖標該怎麼做? 首先用小畫家或其他圖像編輯軟體製作一個 16*16 的圖檔, 例如我用 Tony 的 T 作為圖標 (logo.bmp) :

, 然後用線上轉檔軟體轉成 .ico 檔, 例如 :

# https://www.aconvert.com/tw/icon/png-to-ico/

雖然此網站標題寫 'png 轉 ico', 其實 jpg 或 bmp 等都是可以的 :

轉完後下載 logo,ico, 將其放在程式目錄下, 然後改寫程式, 呼叫根視窗物件的 iconbitmap() 方法並傳入圖標的檔名即可 :

import tkinter as tk

from tkinter import ttk

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('測試') # 設定視窗標題

root.geometry('300x200') # 設定視窗尺寸

root.iconbitmap('logo.ico')

root.mainloop()

結果如下 :

2023-07-16 補充 :

如果程式搬移時 .ico 檔沒有隨同搬移, 則執行時會因為讀不到檔案而發生例外, 因此需用 try except 捕捉, 例如 :

import tkinter as tk

from tkinter import ttk

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('測試') # 設定視窗標題

root.geometry('300x200') # 設定視窗尺寸

try: # 避免沒有 logo 時錯誤

root.iconbitmap('logo.ico')

except Exception as e:

pass

root.mainloop()

這樣當 logo.ico不存在時就會使用預設的 .ico.

匯出 Google 傳統版協作平台內容

我以前使用 Google 協作平台當作網路私人記事本, 用來記錄每天看到的具有參考價值之資訊, 但最近瀏覽協作平台卻發現無法使用, 原來 Google 已經在 6/10 將協作平台網頁刪除, 但一個月內可匯出並下載原先儲存在平台上的內容 :

按 Download 可預約下載作業 :

下載網址會寄到 Gmail 信箱.

雖然去年停止協作平台時 Google 已將平台網頁內容轉移到 Google 雲端硬碟, 但我不確定有無包含上傳到協作平台上的檔案 (待確認), 所以還是將所有內容都下載為宜.

2023年6月22日星期四

Python 學習筆記 : Tkinter 的版面布局容器 Frame 與 PanedWindow

雖然 Frame 物件我還沒時間做一個較完整的測試, 但這周在用 Tkinter 開發公司的維運小軟體時直接拿來上陣使用, 發覺用 Frame 元件搭配最簡單常用的 pack 版面布局也可以將會疊串在一起的 Entry, RadionButton, CheckButton, 與 Button 等元件水平擺放得很整齊.

下面以簡化的系統登入與操作按鈕等元件來說明 Frame 在排版上的妙用. 視窗中包含帳號密碼輸入框, 登入按鈕, 指令輸入框, 執行按鈕, 以及一個執行結果文字區域等元件 :

測試 1 : pack() 的堆疊式的版面布局

import tkinter as tk

from tkinter import ttk

def login():

pass

def run():

pass

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('Frame + Pack 布局測試') # 設定視窗標題

root.geometry('800x600') # 設定視窗尺寸

# 建立登入介面與指令輸入介面

account=tk.Entry(root, width=10) # 帳號輸入框

account.pack() # 元件放入視窗

password=tk.Entry(root, width=10, show='*') # 密碼輸入框

password.pack() # 元件放入視窗

login_btn=tk.Button(root, text='登入', command=login) # 登入按鈕

login_btn.pack() # 元件放入視窗

command=tk.Entry(root, width=20) # 指令輸入框

command.pack() # 元件放入視窗

run_btn=tk.Button(root, text='執行', command=run) # 登入按鈕

run_btn.pack() # 元件放入視窗

# 建立執行結果文字區域

result=tk.Text(root)

result.pack(fill=tk.BOTH, expand=True)

result.pack()

root.mainloop()

結果如下 :

可見 pack 版面管理員的布局方式基本上就是由上而下堆疊, 雖然可以在呼叫 pack() 時傳入 side=tk.RIGHT/LEFT/TOP/BOTTOM 指定上下左右之垂直水平位置, 或傳入 anchor=tk.E/W/S/N/CENTER/NW/NE/SW/SE 來定位元件在父容器中的位置, 但光用 side 與 anchor 參數無法達成讓上方輸入框與按鈕元件以水平方式排在最上方, 且登入在左, 執行在右的需求.

解決辦法之一是使用 Frame 容器來放置元件, 並且每個元件在呼叫 pack() 時傳入 side=tk.LEFT 指定由左向右水平排列, 版面結構如下圖所示 :

測試 2 : 改用 Frame 來當元件容器

import tkinter as tk

from tkinter import ttk

def login():

pass

def run():

pass

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('Frame + Pack 布局測試') # 設定視窗標題

root.geometry('800x600') # 設定視窗尺寸

# 建立登入介面與指令輸入介面

frame=tk.Frame(root) # 外部 Frame 元件

frame.pack()

# 建立以 Frame 為父容器的元件

account=tk.Entry(frame, width=10) # 帳號輸入框

account.pack(side=tk.LEFT) # 元件放入視窗

password=tk.Entry(frame, width=10, show='*') # 密碼輸入框

password.pack(side=tk.LEFT) # 元件放入視窗

login_btn=tk.Button(frame, text='登入', command=login) # 登入按鈕

login_btn.pack(side=tk.LEFT) # 元件放入視窗

command=tk.Entry(frame, width=20) # 指令輸入框

command.pack(side=tk.LEFT) # 元件放入視窗

run_btn=tk.Button(frame, text='執行', command=run) # 登入按鈕

run_btn.pack(side=tk.LEFT) # 元件放入視窗

# 建立執行結果文字區域

result=tk.Text(root)

result.pack(fill=tk.BOTH, expand=True)

result.pack()

root.mainloop()

此例先建立一個 Frame 元件, 然後先後建立以此 Frame 元件為父容器 (不是 root 了) 的輸入框 Entry 與 Button 按鈕等元件, 但 Text 元件依然是以 root 為父元件. 結果如下 :

可見輸入框與按鈕都在 Frame 內呈水平排列. 注意, Frame 內的所有元件呼叫 pack() 時均傳入 tk.LEFT, 這表示元件是在 Frame 內由左向右依序排列之意, 並非定位在左邊 (定位要用 ANCHOR 參數); 同理, tk.RIGHT 表示由右向左排列. 如果將上面範例的 command 與 run_btn 兩個元件的 pack() 改為傳入 tk.RIGHT 會讓此兩元件順序顛倒 :

測試 3 : 呼叫 pack() 傳入 side=tk.RIGHT 為由右向左排列

import tkinter as tk

from tkinter import ttk

def login():

pass

def run():

pass

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('Frame + Pack 布局測試') # 設定視窗標題

root.geometry('800x600') # 設定視窗尺寸

# 建立登入介面與指令輸入介面

frame=tk.Frame(root) # 外部 Frame 元件

frame.pack()

account=tk.Entry(frame, width=10) # 帳號輸入框

account.pack(side=tk.LEFT) # 元件放入視窗

password=tk.Entry(frame, width=10, show='*') # 密碼輸入框

password.pack(side=tk.LEFT) # 元件放入視窗

login_btn=tk.Button(frame, text='登入', command=login) # 登入按鈕

login_btn.pack(side=tk.LEFT) # 元件放入視窗

command=tk.Entry(frame, width=20) # 指令輸入框

command.pack(side=tk.RIGHT) # 元件放入視窗

run_btn=tk.Button(frame, text='執行', command=run) # 登入按鈕

run_btn.pack(side=tk.RIGHT) # 元件放入視窗

# 建立執行結果文字區域

result=tk.Text(root)

result.pack(fill=tk.BOTH, expand=True)

result.pack()

root.mainloop()

此例程式碼與上面不同之處僅在於 command 與 run_btn 這兩個元件呼叫 pack() 時傳入 side=tk.RIGHT 而已, 結果兩個元件就由右向左排列 :

所以放入 Frame 容器的元件呼叫 pack() 時一律傳入 side_tk.LEFT 即可.

如果要讓這些 Frame 內水平排列的元件有所區隔, 可以用一個無顯示字串的 Label 來當隱形的佔位元件, 可透過 width (字元數, 不是 px) 來控制間隔距離, 例如 :

測試 4 : 利用無顯示字串的 Label 元件佔位

import tkinter as tk

from tkinter import ttk

def login():

pass

def run():

pass

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('Frame + Pack 布局測試') # 設定視窗標題

root.geometry('800x600') # 設定視窗尺寸

# 建立登入介面與指令輸入介面

frame=tk.Frame(root) # 外部 Frame 元件

frame.pack()

account=tk.Entry(frame, width=10) # 帳號輸入框

account.pack(side=tk.LEFT) # 元件放入視窗

password=tk.Entry(frame, width=10, show='*') # 密碼輸入框

password.pack(side=tk.LEFT) # 元件放入視窗

login_btn=tk.Button(frame, text='登入', command=login) # 登入按鈕

login_btn.pack(side=tk.LEFT) # 元件放入視窗

placeholder=tk.Label(frame, width=10) # 佔位用的 Label

placeholder.pack(side=tk.LEFT)

command=tk.Entry(frame, width=20) # 指令輸入框

command.pack(side=tk.LEFT) # 元件放入視窗

run_btn=tk.Button(frame, text='執行', command=run) # 登入按鈕

run_btn.pack(side=tk.LEFT) # 元件放入視窗

# 建立執行結果文字區域

result=tk.Text(root)

result.pack(fill=tk.BOTH, expand=True)

result.pack()

root.mainloop()

此例在 login 鈕與 command 輸入框之間插入一個無顯示字串 (即 text='') 且設定 width=10 的 Lable 元件當佔位元件 (空元件), 這樣就在兩元件之間製造了 10 個字元寬度的間隔, 結果如下 :

注意, 間隔寬度若設太大, 撐破 Frame 的寬度時, 後面的元件可能會跳到下一行而影響版面外觀.

除了 Frame 容器外, 也可以用 PanedWindow 來做版面布局, 茲將上面範例中的 Frame 改成 PanedWindow, 結果相同 :

測試 5 : 使用 PanedWindow 排版

import tkinter as tk

from tkinter import ttk

def login():

pass

def run():

pass

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('pw + Pack 布局測試') # 設定視窗標題

root.geometry('800x600') # 設定視窗尺寸

# 建立登入介面與指令輸入介面

pw=tk.PanedWindow(root) # 外部 pw 元件

pw.pack()

account=tk.Entry(pw, width=10) # 帳號輸入框

account.pack(side=tk.LEFT) # 元件放入視窗

password=tk.Entry(pw, width=10, show='*') # 密碼輸入框

password.pack(side=tk.LEFT) # 元件放入視窗

login_btn=tk.Button(pw, text='登入', command=login) # 登入按鈕

login_btn.pack(side=tk.LEFT) # 元件放入視窗

placeholder=tk.Label(pw, width=10) # 佔位用的 Label

placeholder.pack(side=tk.LEFT)

command=tk.Entry(pw, width=20) # 指令輸入框

command.pack(side=tk.LEFT) # 元件放入視窗

run_btn=tk.Button(pw, text='執行', command=run) # 登入按鈕

run_btn.pack(side=tk.LEFT) # 元件放入視窗

# 建立執行結果文字區域

result=tk.Text(root)

result.pack(fill=tk.BOTH, expand=True)

result.pack()

root.mainloop()

此例建立一個 PanedWindow 物件 pw, 然後底下程式碼中的 frame 全部改成 pw, 結果如下 :

可見結果與上面用 Frame 排版的效果一模一樣.

除了直接呼叫元件的 pack() 方法將元件加入父容器 PanedWindow 物件外, 也可以呼叫該物件的 add() 方法, 它預設也是用 tk.LEFT 由左向右將元件放入容器中, 例如 :

測試 6 : 使用 PanedWindow 的 add() 方法將元件加入容器

import tkinter as tk

from tkinter import ttk

def login():

pass

def run():

pass

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('pw + Pack 布局測試') # 設定視窗標題

root.geometry('800x600') # 設定視窗尺寸

# 建立登入介面與指令輸入介面

pw=tk.PanedWindow(root) # 外部 pw 元件

pw.pack()

account=tk.Entry(pw, width=10) # 帳號輸入框

pw.add(account) # 元件放入視窗

password=tk.Entry(pw, width=10, show='*') # 密碼輸入框

pw.add(password) # 元件放入視窗

login_btn=tk.Button(pw, text='登入', command=login) # 登入按鈕

pw.add(login_btn) # 元件放入視窗

placeholder=tk.Label(pw, width=10) # 佔位用的 Label

pw.add(placeholder)

command=tk.Entry(pw, width=20) # 指令輸入框

pw.add(command) # 元件放入視窗

run_btn=tk.Button(pw, text='執行', command=run) # 登入按鈕

pw.add(run_btn) # 元件放入視窗

# 建立執行結果文字區域

result=tk.Text(root)

result.pack(fill=tk.BOTH, expand=True)

result.pack()

root.mainloop()

結果與上面範例相同.

Python 學習筆記 : Tkinter 帶捲軸 Treeview 的位置問題

最近幾天在用 Tinker 開發公司維運軟體時發現了幾個過去不曾注意的小問題, 但這些細節卻足以讓我耗掉無謂的時間在 debug 上面, 例如要幫 Treview 綁定一個右捲軸時, 捲軸居然出現在 Treeview 下方而不是右方, 重新檢視 API 說明與比對之前成功範例都沒錯啊, 怪了.

後來我將原始碼貼給 ChatGPT 詢問到底問題出在哪裡, 原來正解是 : 捲軸必須在 TreeView 之前放置 (pack), 亦即要先呼叫捲軸的 pack(), 然後再呼叫 TreeView 的 pack(), 範例如下 :

測試 1 : 正確的 Treeview + Scrollbar 用法 :

import tkinter as tk

from tkinter import ttk

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('TreeView 與 Scrollbar 測試') # 設定視窗標題

root.geometry('600x200') # 設定視窗尺寸

# 建立捲軸與 Treeview

scrollbar=tk.Scrollbar(root) # 建立捲軸物件

scrollbar.pack(side=tk.RIGHT, fill=tk.Y) # 卷軸必須比 Treeview 先放置

treeview=ttk.Treeview(root, columns=('country', 'continent')) # 建立 Treeview

treeview.heading('#0', text='國碼') # 設定 icon 欄標題

treeview.heading('#1', text='國家') # 設定第二欄標題

treeview.heading('#2', text='洲別') # 設定第三欄標題

# 設定 Treeview 內容 : text 是 icon 欄位, vales 是其他欄位

treeview.insert('', index=tk.END, text='81', values=['日本', '亞洲'])

treeview.insert('', index=tk.END, text='31', values=['荷蘭', '歐洲'])

treeview.insert('', index=tk.END, text='249', values=['蘇丹', '非洲'])

treeview.insert('', index=tk.END, text='886', values=['台灣', '亞洲'])

treeview.insert('', index=tk.END, text='65', values=['新加坡', '亞洲'])

treeview.insert('', index=tk.END, text='44', values=['英國', '歐洲'])

treeview.insert('', index=tk.END, text='501', values=['貝里斯', '美洲'])

treeview.insert('', index=tk.END, text='66', values=['泰國', '亞洲'])

treeview.insert('', index=tk.END, text='504', values=['宏都拉斯', '美洲'])

treeview.insert('', index=tk.END, text='850', values=['北韓', '亞洲'])

treeview.pack(fill=tk.BOTH, expand=True) # Treeview 須在捲軸後放置

# 捲軸與 Treeview 互相綁定

treeview.config(yscrollcommand=scrollbar.set) # Treeview 綁定右捲軸

scrollbar.config(command=treeview.yview) # 捲軸綁定 Treeview

root.mainloop()

注意此處的關鍵在於 Scrollbar 須比 Treeview 先放到 root 容器中, 結果如下 :

可見捲軸正確地出現在 Treeview 右邊. 如果 pack() 的順序顛倒, 即先放 Treeview 後放 Scrollbar, 那麼 Scrollbar 會出現在 Treeview 下方, 例如 :

測試 1 : 不正確的 Treeview + Scrollbar 用法 :

import tkinter as tk

from tkinter import ttk

# 建立視窗

root=tk.Tk() # 建立視窗物件

root.title('TreeView 與 Scrollbar 測試') # 設定視窗標題

root.geometry('600x300') # 設定視窗尺寸