小狐狸事務所: Python 內建 GUI 模組 tkinter 測試 (十二) : Scale 元件

Scale 常用參數	說明
from_	滑桿之起始值 (預設 0)
to	滑桿之結束值 (tk 預設100, ttk 預設 1)
orient	滑桿之方向=tk.HORIZONTAL (tk 預設) / tk.VERTICAL (ttk 預設)
command	當滑桿被捲動時要呼叫之函式名稱
length	滑桿長度 (預設 100 px)
digits	設定滑桿數值之數字位數 (ttk 無)
label	設定顯示於水平滑桿左上角與垂直滑桿右上角之標籤 (預設無)
resolution	設定滑桿滑動一格的數值變動長度 (ttk 無)
showvalue	是否顯示目前滑桿之值, True (顯示)/False (預設不顯示, ttk 無)
width	滑桿柄的寬度 (水平滑桿) 或高度 (垂直滑桿), 預設 10px (ttk 無)
tickinterval	顯示於滑桿旁邊的刻度間隔長度 (ttk 無)
variable	與 Scale 綁定之類別變數名稱 (IntVar, DoubleVar, 或 StringVar)

其中有些參數例如 label, digit, showvalue, tickinterval 等 ttk 不支援, 參考 :

# https://anzeljg.github.io/rin2/book2/2405/docs/tkinter/scale.html

參數 orient 用來設定滑桿方向, 其值可以用 tk.VERTICAL/tk.HORIZONTAL 設定, 也可以使用字串 "vertical"/"horizontal". 注意, tk 與 ttk 版本預設方位剛好相反, tk 版的預設滑桿是垂直的; 而 ttk 版預設是水平滑桿.

參數 variable 用來綁定一個類別參數, 可以是 IntVar, DoubleVar, 或 StringVar (值會被轉成字串). 注意, tk 與 ttk 的 Scale 預設值範圍

注意, 有些參數例如 showvalue 2等只能在 tk 使用, ttk 不支援.

Scale 常用方法	說明
get()	傳回目前 Scale 滑桿之值
set()	設定 Scale 尺規滑桿之值

測試 1 : 預設的尺規滑桿 tk 版 [看原始碼]

import tkinter as tk

from tkinter import ttk

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x200")

scale_h=tk.Scale(win) # 垂直滑桿 (預設)

scale_h.pack()

scale_v=tk.Scale(win, orient=tk.HORIZONTAL) # 水平滑桿

scale_v.pack()

win.mainloop()

此例建立了兩個尺規滑桿, 預設是垂直滑桿, 水平則需指定 orient 參數為 tk.HORIZONTAL (亦可用字串 "horizontal"), 結果如下 :

可見垂直滑桿左方與水平滑桿上方都會顯示目前的滑桿值, 預設為 0~100. 其 ttk 版範例如下 :

測試 2 : 預設的尺規滑桿 ttk 版 [看原始碼]

import tkinter as tk

from tkinter import ttk

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x200")

scale_h=ttk.Scale(win) # 預設水平滑桿

scale_h.pack()

scale_v=ttk.Scale(win, orient=tk.VERTICAL) # 指定為垂直滑桿

scale_v.pack()

win.mainloop()

因為 ttk 預設是水平滑桿, 故垂直滑桿需指定 orient 參數為 tk.VERTICAL, 結果如下 :

可見 ttk 版的滑桿預設不會在旁邊顯示目前滑桿之值, 若要在 ttk 滑桿旁邊顯示其值須另行添加一個 Label 元素才行, 而存取滑桿值的方法則有下列三種 :

透過與 Scale 的 variable 參數綁定的類別變數之 get() 與 set() 方法
利用與 command 參數呼叫的函式之傳入參數 (只能取得不能設定)
利用 Scale 物件的 get() 或 set() 方法

其中第二種方法最簡單, 使用 command 參數去呼叫一個函式, 但與其他元件不同的是, 此函式必須帶一個位置參數 (否則會出現錯誤), 此參數之值就是滑桿之值, 但是這方法只能取得滑桿值, 不能設定滑桿值. 例如 :

測試 3 : 取得與顯示 ttk 滑桿值的方法 [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_h1(value): # 使用類別變數的 get() 方法取得滑桿值

label_h1.set(var_h1.get())

def show_value_h2(value): # 使用函式的傳入參數取得滑桿值

label_h2.set(value)

def show_value_v(value): # 使用 Scale 物件的 get() 取得滑桿值

label_v.set(scale_v.get())

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x250")

var_h1=tk.DoubleVar() # ttk 滑桿應該綁定 DoubleVar 類別變數

scale_h1=ttk.Scale(win, variable=var_h1, command=show_value_h1) # 第一個水平滑桿

scale_h1.pack()

label_h1=tk.StringVar() # 顯示第一個水平滑桿值之 Label

tk.Label(win, textvariable=label_h1).pack()

scale_h2=ttk.Scale(win, command=show_value_h2) # 第二個水平滑桿

scale_h2.pack()

label_h2=tk.StringVar() # 顯示第二個水平滑桿值之 Label

tk.Label(win, textvariable=label_h2).pack()

scale_v=ttk.Scale(win, command=show_value_v, orient="vertical") # 垂直滑桿

scale_v.pack()

label_v=tk.StringVar()

tk.Label(win, textvariable=label_v).pack() # 顯示垂直滑桿值之 Label

win.mainloop()

此例是有兩個水平滑桿與一個垂直滑桿, 分別用來演示三種取得滑桿值的方法, 其中第一個水平滑桿透過綁定的 DoubleVar 類別變數之 get() 方法來取得滑桿值; 第二個水平滑桿則直接使用 command 參數所呼叫的函式傳入參數來取得; 而垂直滑桿則是直接呼叫 Scale 物件的 get() 方法. 每一個滑桿都有一個 Label 搭配顯示其值. 注意, 不論使用哪一種方式, command 參數所呼叫的函式都必須有一個傳入參數. 結果如下 :

可見與 tk 滑桿預設值域 0~100 整數不同的是, ttk 滑桿的值域為 0~1 的浮點數, 這就是為什麼第一個滑桿綁定的是 DoubleVar 類別變數的原因, 如果綁定 IntVar 變數將永遠取得 0.

tk 滑桿雖然自帶數值顯示, 但要取得其值也是使用這三種方式, 不過使用類別變數綁定時應該使用 IntVar, 若使用 DoubleVar 將取得一個帶一位小數 .0 之數值, 但這沒用處. 例如 :

測試 4 : 取得與顯示 tk 滑桿值的方法 [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_h1(value):

label_h1.set(var_h1.get())

def show_value_h2(value):

label_h2.set(value)

def show_value_v(value):

label_v.set(scale_v.get())

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x300")

var_h1=tk.IntVar() # tk 滑桿應該綁定 IntVar 類別變數

scale_h1=tk.Scale(win,

variable=var_h1,

orient="horizontal",

command=show_value_h1) # 第一個水平滑桿

scale_h1.pack()

label_h1=tk.StringVar()

tk.Label(win, textvariable=label_h1).pack()

scale_h2=tk.Scale(win,

orient="horizontal",

command=show_value_h2) # 第二個水平滑桿

scale_h2.pack()

label_h2=tk.StringVar()

tk.Label(win, textvariable=label_h2).pack()

scale_v=tk.Scale(win, command=show_value_v) # tk 預設是垂直滑桿

scale_v.pack()

label_v=tk.StringVar()

tk.Label(win, textvariable=label_v).pack()

win.mainloop()

此例與上例差別僅在於與 tk 滑桿綁定之類別變數應該使用 IntVar, 以及 tk 滑桿預設是垂直,而 ttk 預設是水平, 結果如下 :

Scale 元件的數值預設值都是 0, 如果要改變此域設值必須透過與其綁定之類別變數 IntVar (tk) 或 DoubleVar(ttk), 因為 Scale 元件並未提供參數來設定預設值, 例如 :

測試 5 : 利用類別變數的 set() 方法設定滑桿初始值 [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_tk(value):

label_tk.set(value)

def show_value_ttk(value):

label_ttk.set(value)

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x250")

var_tk=tk.IntVar()

var_tk.set(20) # 透過綁定之類別變數設定 tk 滑桿初始值

scale_tk=tk.Scale(win,

variable=var_tk,

command=show_value_tk)

scale_tk.pack()

label_tk=tk.StringVar()

tk.Label(win, textvariable=label_tk).pack()

var_ttk=tk.DoubleVar()

var_ttk.set(0.7071) # 透過綁定之類別變數設定 ttk 滑桿初始值

scale_ttk=ttk.Scale(win,

variable=var_ttk,

command=show_value_ttk)

scale_ttk.pack()

label_ttk=tk.StringVar()

label_ttk.set(0.7071)

tk.Label(win, textvariable=label_ttk).pack()

win.mainloop()

此例建立了兩個類別變數 var_tk 與 var_ttk 經由 variable 參數分別綁定到 tk 與 ttk 的 Scale 元件, 只要呼叫類別變數的 set() 方法即可設定滑桿的初始值, 結果如下 :

可見程式一開始執行, 兩個滑桿初始值就不是預設的 0, 而是所設定之值 20 與 0.7071 了.

從以上的範例可知, tk 的 Scale 數值是預設傳回 0~100 的整數, 而 ttk 的 Scale 數值是預設傳回 0~1 的浮點數, 這預設範圍可以用 from_ 與 to 參數更改, 例如 :

測試 6 : 用 from_ 與 to 參數更改滑桿範圍 [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_tk(value): # 顯示 tk 滑桿值

label_tk.set(value)

def show_value_ttk(value): # 顯示 ttk 滑桿值

label_ttk.set(value)

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x250")

scale_tk=tk.Scale(win,

from_=-10.0,

to=10.0,

command=show_value_tk)

scale_tk.pack()

label_tk=tk.StringVar()

tk.Label(win, textvariable=label_tk).pack()

scale_ttk=ttk.Scale(win,

from_=-10,

to=10,

command=show_value_ttk)

scale_ttk.pack()

label_ttk=tk.StringVar()

tk.Label(win, textvariable=label_ttk).pack()

win.mainloop()

此例兩個 Scale 一個是 tk 的, 另一個是 ttk 的, 都可以用 from_ 與 to 參數設定範圍, 結果如下 :

可見兩個滑桿值的範圍都被改成 -10~10 了.

滑桿的長度預設是 100px, 柄的寬度預設是 10px, 可以分別用 length 與 width 參數設定, 下面範例除了測試 length 與 width 外, 還測試了一些共同的參數如 bg 與 relief 等 :

測試 7 : 用 width 與 length 參數設定滑桿長度與柄的寬度 (tk) [看原始碼]

import tkinter as tk

from tkinter import ttk

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x250")

scale_h=tk.Scale(win, width=40, length=150) # 設定滑桿長度與柄之寬度

scale_h["bg"]="ivory"

scale_h["relief"]="ridge"

scale_h.pack()

scale_v=tk.Scale(win,

width=40,

length=250,

bg="cyan")

scale_v["orient"]="horizontal" # 用 [] 設定參數

scale_v.config(relief="sunken", bg="cyan") # 呼叫 config() 設定參數

scale_v.pack()

win.mainloop()

此例的 tk 滑桿使用了三種方式設定參數, 一是在建立 Slider 物件時值皆傳入參數, 二是建立參數後用 [] 運算子設定, 三是呼叫 Scale 物件的 config() 方法設定, 結果如下 :

可見 bg 的效果主要是在自帶數值顯示標籤上, 滑桿本身還是一樣灰色.

但 bg/backgroun, relief, 以及 width 等參數在 ttk 版的 Slider 元件均不支援, 僅 length 可用, 例如 :

測試 8 : 用 length 參數設定滑桿長度 (ttk) [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_h(value): # 顯示水平滑桿值

label_h.config(text=value)

def show_value_v(value): # 顯示垂直滑桿值

label_v.config(text=value)

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x250")

scale_h=ttk.Scale(win, length=250) # 設定水平滑桿長度

scale_h["command"]=show_value_h # 使用 [] 運算子設定參數

scale_h.pack()

label_h=ttk.Label(win)

label_h.pack()

scale_v=ttk.Scale(win, length=150) # 設定垂直滑桿長度

scale_v["orient"]="vertical" # 使用 [] 運算子設定參數

scale_v.config(command=show_value_v) # 呼叫 config() 設定參數

scale_v.pack()

label_v=ttk.Label(win)

label_v.pack()

win.mainloop()

此例主要是測試 ttk 版 Slider 元件的 length 長度參數, 同樣也是使用了三種方式設定滑桿參數, 且在滑桿的滑動事件處理函式 show_value_h() 與 show_value_v() 中改用呼叫 Label 物件的 conffig() 方法來更新標籤文字, 結果如下 :

下面範例測試 showvalue 參數, 此參數 showvalue 只能在 tk 的 Scale 使用, ttk 不支援, 例如 :

測試 9 : 將 showvalue 設為 False 關閉 tk 滑桿自帶之數值顯示功能 [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_v(value):

label_v.config(text=value)

def show_value_h(value):

label_h.config(text=value)

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x250")

scale_v=tk.Scale(win, showvalue=False, command=show_value_v) # 關閉數值顯示

scale_v.pack()

label_v=tk.Label(win)

label_v.pack()

scale_h=tk.Scale(win, orient="horizontal", command=show_value_h) # 預設開啟數值顯示

scale_h.pack()

label_h=tk.Label(win)

label_h.pack()

win.mainloop()

此例在建立垂直滑桿 scale_v 時將 showvalue 參數設為 False 關閉了數值顯示功能, 但透過添加的 Label 標籤元件同樣可顯示其值 (差別是這數值不會跟著滑桿的柄滑動), 而水平滑桿因為 tk 的 Scale 預設就是顯示數值, 不須設定 showvalue=Ture, 結果如下 :

下面範例測試 tickinterval 參數, 此參數用來設定顯示滑桿刻度一格的數值, 僅 tk 有此參數, ttk 不支援. 其值為 from_ 與 to 數值的一個分數, 例如預設數值範圍為 0~100, 若 tickinterval=10, 則刻度將顯示 10, 20, 30, ... 100, 例如 :

測試 10 : 用 tickinterval 參數設定刻度單位並顯示滑桿刻度 [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_h(value):

label_h.config(text=value)

def show_value_v(value):

label_v.config(text=value)

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("400x450")

scale_h=tk.Scale(win,

length=280,

orient="horizontal",

tickinterval=10,

command=show_value_h)

scale_h.pack()

label_h=tk.Label(win)

label_h.pack()

scale_v=tk.Scale(win,

length=280,

tickinterval=10,

command=show_value_v)

scale_v.pack()

label_v=tk.Label(win)

label_v.pack()

win.mainloop()

此例垂直與水平滑桿之 tickinterval 均設為 10, 表示刻度值將是 0, 10, 20, 30, .... 100, 但注意須配合使用 length 參數指定夠長的長度才能顯示期待之刻度, 結果如下 :

若將 length 設為 200 將不足以容納這些刻度而得到非預期的結果 :

以上 tk 滑桿滑動時預設滑動解析度步階是 1, 亦即滑桿滑動時數值跳動的間隔, 此步階可用 resolution 參數設定, 但只能在 tk 的滑桿使用, ttk 不支援此 resolution 參數, 例如 :

測試 11 : 用 resolution 參數設定 tk 滑桿刻度解析度 (滑動步階) [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_h(value):

label_h.config(text=value)

def show_value_v(value):

label_v.config(text=value)

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("400x450")

scale_h=tk.Scale(win,

length=280,

orient="horizontal",

tickinterval=10,

resolution=5,

command=show_value_h)

scale_h.pack()

label_h=tk.Label(win)

label_h.pack()

scale_v=tk.Scale(win,

length=280,

tickinterval=10,

resolution=20,

command=show_value_v)

scale_v.pack()

label_v=tk.Label(win)

label_v.pack()

win.mainloop()

此例兩個滑桿都設定了 resolution 參數, 同時也配合設定了 tickinterval 參數, 當 resolution 比 tickinterval 還小時, 刻度顯示不會受影響 (例如此例之水平滑桿, tickinterval=10, resolution=5, 刻度顯示仍以 tickinterval 為準); 但若 resolution 比 tickinterval 大時 (例如垂直滑桿刻度顯示 tickinterval 為 10, 但 resolution 為 20, 會以 resolution 為刻度顯示間隔), 刻度會以 resolution 為準, 結果如下 :

可見雖然垂直滑桿的 tickinterval 設為 10, 但因為 resolution 設為 20, 滑動一個步階就差 20, 因此刻度顯示 tickinterval 被忽視, 改以 resolution 為刻度單位.

下面測試 digits 參數, 用來設定滑桿數值之數字位數, 預設為 0, 表示不控制顯示位數, 若設為 5 表示控制顯示位數含整數與小數共 5 個數字, 要配合 from_, to, 與 resolution 參數使用才有意義. 例如 from_1=-10, to=10, resolution=5, 表示整數最多占 2 位, 小數應占 5-2=3 位, 故 resolution 應設 0.00x 比較有意義. 此參數僅 tk 有, ttk 不支援, 例如 :

測試 12 : 用 digits 參數設定 tk 滑桿值顯示數字位數 [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_h(value):

label_h.config(text=value)

def show_value_v(value):

label_v.config(text=value)

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("400x450")

var=tk.StringVar()

scale_h=tk.Scale(win,

length=280,

orient="horizontal",

from_=-10.0,

to=10.0,

digits=5,

resolution=0.005,

command=show_value_h)

scale_h.pack()

label_h=tk.Label(win)

label_h.pack()

scale_v=tk.Scale(win,

length=280,

from_=-10.0,

to=10.0,

digits=4,

resolution=0.1,

command=show_value_v)

scale_v.pack()

label_v=tk.Label(win)

label_v.pack()

win.mainloop()

此例上方水平滑桿 digits 設 5, from_=-10, to=10, 整數占掉兩位, 小數剩三位, 故 resolution 要設到小數第三位 (例如此處 0.005) 較有意義, 若設 0.05 則小數第三位總是為 0 就變得冗餘了. 下方的垂直滑桿即是如此, digits 設 4, 表示小數位數有兩位, 但 resolution 設 0.1 就使得小數第二位總是為 0, 結果如下 :

最後來測試 label 參數, 它會在滑桿旁邊顯示一個標籤文字, 但是只能在 tk 使用, ttk 並不支援. 所以上面 tk 範例中用來顯示滑桿數值的 Label 元件其實可以用 Scale 自帶的 Label 來取代, 例如上面的測試 4 可以簡化為如下程式碼 :

測試 13 : 用 label 參數設定 tk 滑桿值顯示標籤內容 [看原始碼]

import tkinter as tk

from tkinter import ttk

def show_value_h1(value):

scale_h1.config(label=var_h1.get())

def show_value_h2(value):

scale_h2["label"]=value

def show_value_v(value):

scale_v.configure(label=scale_v.get())

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("300x300")

var_h1=tk.IntVar()

scale_h1=tk.Scale(win,

variable=var_h1,

orient="horizontal",

command=show_value_h1)

scale_h1.pack()

scale_h2=tk.Scale(win,

orient="horizontal",

command=show_value_h2)

scale_h2.pack()

scale_v=tk.Scale(win, command=show_value_v)

scale_v.pack()

win.mainloop()

此例是將上面測試 4 中的三個 Label 去除, 然後修改三個滑動是件處理函式, 使用 config() 與 configure() 方法以及 [] 運算子動態修改 label 參數值, 效果與測試 4 是一樣的, 結果如下 :

可見 lebel 參數所設定之標籤文字是在水平滑桿是顯示於左上方, 在垂直滑桿則是顯示在右上方, 此例它會跟自帶的數值標籤一樣動態顯示滑桿之值, 但不會隨柄移動.

下面 RGB 調色盤範例是把 label 參數拿來顯示固定提示訊息 :

測試 14 : 用 label 參數顯示固定提示訊息 [看原始碼]

import tkinter as tk

from tkinter import ttk

def change_color(value):

r=hex(scale_r.get())[2:]

g=hex(scale_g.get())[2:]

b=hex(scale_b.get())[2:]

if len(r) < 2: # 個位數顏色碼前面補 "0"

r += "0"

if len(g) < 2: # 個位數顏色碼前面補 "0"

g += "0"

if len(b) < 2: # 個位數顏色碼前面補 "0"

b += "0"

color="#" + str(r) + str(g) + str(b) # 組合完整 RGB 顏色碼

label.config(bg=color, text=color) # 更新 Label 元件底色

win=tk.Tk()

win.title("tkinter GUI 測試")

win.geometry("250x250")

scale_r=tk.Scale(win,

from_=0,

to=255,

label="R",

orient="horizontal",

command=change_color)

scale_r.set(0)

scale_r.grid(row=0, column=0)

scale_g=tk.Scale(win,

from_=0,

to=255,

label="G",

orient="horizontal",

command=change_color)

scale_g.set(0)

scale_g.grid(row=1, column=0)

scale_b=tk.Scale(win,

from_=0,

to=255,

label="B",

orient="horizontal",

command=change_color)

scale_b.set(0)

scale_b.grid(row=2, column=0)

label=tk.Label(win, bg="white", width=10, height=10)

label.grid(row=0, rowspan=3, column=1)

win.mainloop()

此例使用 grid 排版, 用來調整三原色 RGB 的三個水平 Scale 元件放在第一欄, 顯示顏色的 Label 放第二欄 (用 rospan=3 合併三列). 三個滑桿都用 label 參數分別設定了 R, G, B 的固定提示標籤文字, 數值範圍均為 0~255, 且 command 參數都是呼叫 change_color() 函式.

當任一滑桿滑動時會呼叫各滑桿的 get() 方法取得 0~255 現值, 然後傳給內建函式 hex() 將十進位數轉成十六進位字串, 但它前面會冠上 "0x" 例如 255 會轉成 "0xff", 這 "0x" 可用切片 [2:] 去除, 方便組成 bg 參數所需之顏色碼, 其完整格式為 "#rrggbb", 因此必須將個位數前面補 "0" 才能組合成完整顏色碼 (格式不完整會出現錯誤), 用來設定 Label 的底色與文字, 結果如下 :