#

進度列(progressbar)是一種顯示程式執行進度的視窗元件,時常會在安裝程式或是檔案下載/上載時看到它。這一個章節會介紹進度列的使用方法。

31.1 建立進度列

建立進度列的方法是使用ttk的progressbar命令,如下是建立的例子:



這個例子建立了一個進度列及按鈕,進度列可以表示的最大數值是100(-maximum),運作模式(-mode)是有限模式(determinate),如同許多的Tk視窗元件,進度列也可以使用-variable指定一個變數的名稱來反映目前的值。下圖是程式執行的結果,當使用者每按一下「加5」按鈕,進度列上色條就會逐步向前。注意哦!! 進度列可以用浮點數來設定最大值及目前值。

圖 31-1


下面是改用無限(indeterminate)模式的例子,在這個例子裡,進度列上的色條變成固定長度,而且會在進度列上左右彈動。



執行起來像這樣:

圖 31-2


□ 使用範例

接下來要示範一個週期步進progressbar的例子,這個程式執行後進度列上的色條就會隨時間逐漸增加,它的程式碼如下:



這個程式的觀念很簡單,程式每隔一段時間就累加進度列的目前值,也就是累加::val,這樣進度列上的色條就會隨時間增加。

讓我們再看一個檔案下載的例子,這個程式會去網路下載ezdit-0.8.6版的程式檔,在下載的過程我使用了進度列來顯示下載的進度。



這個例子使用了Tcl內建的http套件。http::geturl命令可以下載指定URL的檔案,它的-progress選項可以指定一個callback程序,這個callback程序會在http::geturl命令收到特定大小的資料片段時重複執行,而且會自動加上3個參數,第1個參數是操控這個http::geturl命令本身的token,這個token可以用來中斷或是重置下載的動作,第2個參數是下載檔案的總長度這個值是由http header裡的Content-Length取得,第3個參數是目前已下載的檔案長度。

在這個例子中,我在cb程序(即callback程序)中計算整體的下載百分比然後在進度列及標籤上顯示。

□ progressbar常用的命令

progressbar常用的視窗元件命令有3個,分別是start、step及stop。start可以用來周期性自動增加進度列本身的值,例如:



如果執行了上面的命令,進度列就會自動每0.5秒把自己的值加1.0。當然想要停掉的話執行stop就可以了,像這樣:



step的功能可以用來增加進度列的值,例如:



每執行一次上面的命令進度列上的值就會增加10。

□ 其它常用選項

以下是其它常用的選項,有興趣的朋友請自己試看看吧!!

-length 指定進度列水平放置時的長度或垂直放置時的高度。
-orient 設定進度列的樣式horizontal(水平)或vertical(垂直)。

進度列也提供了cget及configure等標準的視窗元件命令,它們的用法請參考這一章的說明。

8 個意見

翊翾 | 2010年1月17日 下午3:49

Dai你好~
你這頁的連結好像錯了喔
連結到進度條,但其實要連的應該是分頁框吧^^~

dai | 2010年1月17日 下午3:55

改好了 謝謝!!

isPeter | 2010年11月29日 下午5:54

Hello Dai,

我這邊是 Linux + tcl8.4
在執行由上往下算,第3個範例程式的時候。
"incr ::val 5"
這一行會出錯

---
Error in startup script: expected integer but got ""
while executing
"incr ::val 5"
(procedure "timer" line 2)
invoked from within
"timer"
(file "test.tcl" line 13)
---

我在使用 incr 前,先給宣告變數,似乎可以解決這問題。

"set ::val 0"

dai | 2010年11月30日 下午12:48

hi isPeter,

謝謝你提出問題及解法,等我回台灣時有空試一試再和你交流結果。

Hu Mike | 2015年1月26日 下午5:40

請問進度條上,藍色的區域,這邊可以加數字顯示嗎?
不然有時候45%和50%,感覺差異不大啊~

dai | 2015年1月27日 上午9:12

建一個label並把它的-textvariable設定成跟progressbar 的 -variable 相同,這樣label可立刻反應progressbar的進度。然後再看你要用place或是pack把label放到progressbar 上。

Hu Mike | 2015年1月27日 上午9:42

可是這樣除了數字之外,還有一個背景方塊在那邊,擋住bar了,
以上面按 button 後+5的範例為例,我加了兩行
label .lab -textvariable ::val
place .lab -x 20 -y 0
就會有這個問題。

dai | 2015年1月27日 下午4:20

因為 label 不支援透明背景

留下您的意見

Theme Design by devolux.org. Converted by Wordpress To Blogger for WP Blogger Themes. Sponsored by iBlogtoBlog
This template is brought to you by : allblogtools.com | Blogger Templates