2021年9月11日 星期六

Python 內建 GUI 模組 tkinter 測試 (十二) : Scale 元件

Tkinter 功夫已經練到第 11 層了, 今天要練第 12 層的 Scale 元件 (又稱 Slider 滑桿). 

本系列之前的文章參考 :   


Scale 元件具有可滑動的滑桿, 用來在限定的連續範圍內設定一個數值, 此元件 tk 與 ttk 中均有提供. 建立 Scale 元件之語法如下 : 

Scale(父容器, **參數列)



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 不支援, 參考 :


參數 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 的底色與文字, 結果如下 :




只要滑動 RGB 滑桿右方的 Label 背景色就會立即動態改變. 

參考: 


沒有留言 :