Ruby - Tk 指南

引言

Ruby 的標準圖形使用者介面 (GUI) 是 Tk。Tk 最初是 John Ousterhout 開發的 Tcl 指令碼語言的 GUI。

Tk 具有獨特的優勢，它是唯一一個跨平臺的 GUI。Tk 可以在 Windows、Mac 和 Linux 上執行，並在每個作業系統上提供原生外觀和感覺。

基於 Tk 的應用程式的基本元件稱為小部件。元件有時也稱為視窗，因為在 Tk 中，“視窗”和“小部件”通常可以互換使用。

Tk 應用程式遵循小部件層次結構，其中任意數量的小部件可以放置在另一個小部件內，而這些小部件又可以放置在另一個小部件內，以此類推。Tk 程式中的主小部件稱為根小部件，可以透過建立 TkRoot 類的新的例項來建立。

大多數基於 Tk 的應用程式都遵循相同的迴圈：建立小部件，將它們放置在介面中，最後將與每個小部件關聯的事件繫結到方法。
有三個幾何管理器；place、grid 和 pack 負責控制介面中每個小部件的大小和位置。

安裝

Ruby Tk 繫結與 Ruby 一起分發，但 Tk 是單獨安裝的。Windows 使用者可以從 ActiveState 的 ActiveTcl 下載一鍵式 Tk 安裝程式。

Mac 和 Linux 使用者可能不需要安裝它，因為很有可能它已經隨作業系統一起安裝了，但如果沒有，您可以下載預構建的軟體包或從 Tcl 開發者交流獲取原始碼。

簡單的 Tk 應用程式

Ruby/Tk 程式的典型結構是建立主視窗或根視窗（TkRoot 的例項），向其中新增小部件以構建使用者介面，然後透過呼叫Tk.mainloop啟動主事件迴圈。

Ruby/Tk 的傳統Hello, World!示例如下所示：

require 'tk'

root = TkRoot.new { title "Hello, World!" }
TkLabel.new(root) do
   text 'Hello, World!'
   pack { padx 15 ; pady 15; side 'left' }
end
Tk.mainloop

在這裡，載入 tk 擴充套件模組後，我們使用TkRoot.new建立一個根級框架。然後，我們建立一個TkLabel小部件作為根框架的子項，為標籤設定多個選項。最後，我們打包根框架並進入主 GUI 事件迴圈。

如果執行此指令碼，將產生以下結果：

Ruby/Tk 小部件類

這是一個各種 Ruby/Tk 類的列表，可以使用它們來使用 Ruby/Tk 建立所需的 GUI。

TkFrame 建立和操作框架小部件。
TkButton 建立和操作按鈕小部件。
TkLabel 建立和操作標籤小部件。
TkEntry 建立和操作輸入小部件。
TkCheckButton 建立和操作複選框小部件。
TkRadioButton 建立和操作單選按鈕小部件。
TkListbox 建立和操作列表框小部件。
TkComboBox 建立和操作組合框小部件。
TkMenu 建立和操作選單小部件。
TkMenubutton 建立和操作選單按鈕小部件。
Tk.messageBox 建立和操作訊息對話方塊。
TkScrollbar 建立和操作捲軸小部件。
TkCanvas 建立和操作畫布小部件。
TkScale 建立和操作刻度小部件。
TkText 建立和操作文字小部件。
TkToplevel 建立和操作頂級小部件。
TkSpinbox 建立和操作旋轉框小部件。
TkProgressBar 建立和操作進度條小部件。
對話方塊建立和操作對話方塊小部件。
Tk::Tile::Notebook 使用筆記本隱喻在有限的空間中顯示多個視窗。
Tk::Tile::Paned 顯示垂直或水平堆疊的多個子視窗。
Tk::Tile::Separator 顯示水平或垂直分隔條。
Ruby/Tk 字型、顏色和影像理解 Ruby/Tk 字型、顏色和影像

標準配置選項

所有小部件都有一些不同的配置選項，這些選項通常控制它們如何顯示或如何工作。可用的選項當然取決於小部件類。

這是一個所有標準配置選項的列表，這些選項可能適用於任何 Ruby/Tk 小部件。

還有其他特定於小部件的選項，這些選項將在介紹小部件時進行解釋。

序號	選項和描述
1	activebackground => 字串指定繪製活動元素時使用的背景顏色。如果滑鼠游標位於元素上並且按下滑鼠按鈕將導致某些操作發生，則元素處於活動狀態。您可以使用顏色名稱，例如“red”、“blue”、“pink”、“yellow”等。
2	activeborderwidth => 整數指定一個非負值，指示圍繞活動元素繪製的 3D 邊框的寬度。
3	activeforeground => 字串指定繪製活動元素時使用的前景色。
4	anchor => 字串指定如何在小部件中顯示小部件中的資訊（例如文字或點陣圖）。必須是n、ne、e、se、s、sw、w、nw或center值之一。例如，nw表示顯示資訊，使其左上角位於小部件的左上角。
5	background 或 bg => 字串指定顯示小部件時使用的普通背景顏色。
6	bitmap => 點陣圖指定在小部件中顯示的點陣圖。點陣圖的顯示方式可能受其他選項（如 anchor 或 justify）的影響。
7	borderwidth 或 bd => 整數指定一個非負值，指示圍繞小部件外部繪製的 3D 邊框的寬度。
8	compound => 字串指定小部件是否應同時顯示文字和點陣圖/影像，如果顯示，則應相對於文字放置點陣圖/影像的位置。必須是none、bottom、top、left、right或center值之一。
9	cursor => 字串指定要用於小部件的滑鼠游標。可能的值可以是“watch”、“arrow”等。
10	disabledforeground => 字串指定繪製停用元素時使用的前景色。
11	exportselection => 布林值指定小部件中的選擇是否也應該是 X 選擇。該值可以是true、false、0、1、yes或no中的任何一個。如果匯出了選擇，則在小部件中進行選擇會取消選擇當前的 X 選擇，在小部件外部進行選擇會取消選擇任何小部件選擇，並且當小部件有選擇時，它將響應選擇檢索請求。
12	font => 字串指定在小部件內繪製文字時使用的字型。
13	foreground 或 fg => 字串指定顯示小部件時使用的普通前景色。
14	highlightbackground => 字串指定當小部件沒有輸入焦點時在遍歷高亮區域中顯示的顏色。
15	highlightcolor => 字串指定當小部件具有輸入焦點時，圍繞小部件繪製的遍歷高亮矩形所使用的顏色。
16	highlightthickness => 整數指定一個非負值，指示當小部件具有輸入焦點時，圍繞小部件外部繪製的高亮矩形的寬度。
17	image => 影像指定在小部件中顯示的影像，該影像必須使用影像建立建立。通常，如果指定了 image 選項，則它會覆蓋指定在小部件中顯示點陣圖或文字值的其他選項；image 選項可以重置為空字串以重新啟用點陣圖或文字顯示。
18	jump => 字串對於帶有可拖動滑塊以調整值的部件（例如捲軸和刻度），此選項決定何時發出有關值變化的通知。選項的值必須是布林值。如果值為false，則在拖動滑塊時會持續更新。如果值為true，則更新會延遲到滑鼠按鈕釋放以結束拖動；此時會發出單個通知。
19	justify => 字串當部件中顯示多行文字時，此選項決定這些行如何相互對齊。必須是left、center或right之一。Left表示所有行的左邊緣對齊，center表示行的中心對齊，right表示行的右邊緣對齊。
20	offset => 字串指定平鋪的偏移量（另請參見tile選項）。它可以有兩種不同的格式offset x,y或 offset side，其中side可以是n、ne、e、se、s、sw、w、nw或center。
21	orient => 字串對於可以水平或垂直方向佈局自身的部件（例如捲軸），此選項指定應使用哪種方向。必須是horizontal或vertical，或者它們的縮寫。
22	padx => 整數指定一個非負值，指示部件在X方向上請求的額外空間大小。
23	pady => 整數指定一個非負值，指示部件在Y方向上請求的額外空間大小。
24	relief => 整數指定部件所需的3D效果。可接受的值為raised、sunken、flat、ridge和groove。
25	repeatdelay => 整數指定按鈕或鍵必須按住多少毫秒才能開始自動重複。例如，在捲軸的向上和向下箭頭中使用。
26	repeatinterval => 整數與repeatdelay結合使用：一旦開始自動重複，此選項確定自動重複之間的毫秒數。
27	selectbackground => 字串指定顯示選中項時使用的背景顏色。
28	selectborderwidth => 整數指定一個非負值，指示圍繞選中項繪製的3D邊框的寬度。
29	selectforeground => 字串指定顯示選中項時使用的前景顏色。
30	setgrid => 布林值指定一個布林值，確定此部件是否控制其頂級視窗的調整大小網格。此選項通常用於文字部件，其中部件中的資訊具有自然大小（字元的大小），並且視窗的尺寸是這些單位的整數倍是有意義的。
31	takefocus => 整數提供透過鍵盤遍歷（例如，Tab和Shift-Tab）從視窗移動焦點時使用資訊。在將焦點設定為視窗之前，遍歷指令碼首先檢查視窗是否可見（它及其所有祖先都已對映）；如果不是，則跳過該視窗。值為0表示應在鍵盤遍歷期間完全跳過此視窗。1表示此視窗應始終接收輸入焦點。
32	text => 字串指定要在部件內顯示的字串。字串的顯示方式取決於具體的部件，並且可能由其他選項（例如anchor或justify）確定。
33	textvariable => 變數指定變數的名稱。變數的值是要在部件內顯示的文字字串；如果變數值更改，則部件將自動更新自身以反映新值。字串在部件中的顯示方式取決於具體的部件，並且可能由其他選項（例如anchor或justify）確定。
34	tile => 圖片指定用於顯示部件的圖片。如果圖片為空字串，則顯示正常的背景顏色。
35	troughcolor => 字串指定用於捲軸和刻度等部件中的矩形槽區域的顏色。
36	troughtile => 圖片指定用於在捲軸和刻度等部件中的矩形槽區域顯示的圖片。
37	underline => 整數指定要在部件中下劃線的字元的整數索引。此選項由預設繫結用於實現選單按鈕和選單項的鍵盤遍歷。0對應於部件中顯示文字的第一個字元，1對應於下一個字元，依此類推。
38	wraplength => 整數對於可以執行自動換行的部件，此選項指定最大行長。
39	xscrollcommand => 函式指定用於與水平捲軸通訊的回撥函式。
40	yscrollcommand => 函式指定用於與垂直捲軸通訊的回撥函式。

Ruby/Tk 幾何管理

幾何管理處理根據需要定位不同的部件。Tk中的幾何管理依賴於主部件和從部件的概念。

主部件是一個部件，通常是頂級視窗或框架，它將包含其他部件，這些部件稱為從部件。您可以將幾何管理器視為控制主部件並決定將在其中顯示的內容。

幾何管理器將詢問每個從部件其自然大小，或者它理想情況下希望顯示多大。然後，它將獲取該資訊並將其與程式在要求幾何管理器管理該特定從部件時提供的任何引數相結合。

有三個幾何管理器place、grid和pack負責控制介面中每個部件的大小和位置。

grid 將部件排列在網格中的幾何管理器。
pack 在空腔邊緣周圍打包的幾何管理器。
place 用於固定或橡膠片放置的幾何管理器。

Ruby/Tk 事件處理

Ruby/Tk 支援事件迴圈，它接收來自作業系統的事件。這些事件包括按鈕按下、按鍵、滑鼠移動、視窗調整大小等等。

Ruby/Tk負責為您管理此事件迴圈。它將確定事件適用的部件（使用者單擊此按鈕了嗎？如果按下了鍵，哪個文字框獲得了焦點？），並相應地分派它。各個部件知道如何響應事件，例如，當滑鼠移到按鈕上時，按鈕可能會更改顏色，而當滑鼠離開時，按鈕會恢復原狀。

在更高層次上，Ruby/Tk 呼叫程式中的回撥以指示部件發生了一些重要事件。對於這兩種情況，您可以提供一個程式碼塊或一個Ruby Proc物件，該物件指定應用程式如何響應事件或回撥。

讓我們來看看如何使用bind方法將基本的視窗系統事件與處理它們的Ruby過程關聯起來。bind的最簡單的形式將指示事件名稱的字串和Tk用於處理事件的程式碼塊作為輸入。

例如，要捕獲某些部件上第一個滑鼠按鈕的ButtonRelease事件，您可以編寫：

someWidget.bind('ButtonRelease-1') {
   ....code block to handle this event...
}

事件名稱可以包含其他修飾符和詳細資訊。修飾符是一個字串，例如Shift、Control或Alt，表示按下了其中一個修飾鍵。

例如，要捕獲使用者按住Ctrl鍵並單擊右滑鼠按鈕時生成的事件。

someWidget.bind('Control-ButtonPress-3', proc { puts "Ouch!" })

許多Ruby/Tk部件在使用者啟用它們時可以觸發回撥，您可以使用command回撥來指定在發生這種情況時呼叫某個程式碼塊或過程。如前所述，您可以在建立部件時指定命令回撥過程：

helpButton = TkButton.new(buttonFrame) {
   text "Help"
   command proc { showHelp }
}

或者您可以使用部件的command方法稍後分配它：

helpButton.command proc { showHelp }

由於command方法接受過程或程式碼塊，您也可以將前面的程式碼示例編寫為：

helpButton = TkButton.new(buttonFrame) {
   text "Help"
   command { showHelp }
}

您可以在您的Ruby/Tk應用程式中使用以下基本事件型別：

序號	標籤 & 事件描述
1	"1" (一) 單擊左滑鼠按鈕。
2	"ButtonPress-1" 單擊左滑鼠按鈕。
3	"Enter" 滑鼠移入。
4	"Leave" 滑鼠移出。
5	"Double-1" 雙擊。
6	"B3-Motion" 右鍵從一個位置拖動到另一個位置。
7	Control-ButtonPress-3 右鍵與Ctrl鍵一起按下。
8	Alt-ButtonPress-1 左鍵與Alt鍵一起按下。

configure 方法

configure方法可用於設定和檢索任何部件配置值。例如，要更改按鈕的寬度，您可以隨時呼叫configure方法，如下所示：

require "tk"

button = TkButton.new {
   text 'Hello World!'
   pack
}
button.configure('activebackground', 'blue')
Tk.mainloop

要獲取當前部件的值，只需不提供值即可，如下所示：

color = button.configure('activebackground')

您也可以不帶任何選項呼叫configure，這將為您提供所有選項及其值的列表。

cget 方法

為了簡單地檢索選項的值，configure返回的資訊比您通常想要的多。cget方法只返回當前值。

color = button.cget('activebackground')

列印頁面

序號	選項和描述
1	activebackground => 字串指定繪製活動元素時使用的背景顏色。如果滑鼠游標位於元素上並且按下滑鼠按鈕將導致某些操作發生，則元素處於活動狀態。您可以使用顏色名稱，例如“red”、“blue”、“pink”、“yellow”等。
2	activeborderwidth => 整數指定一個非負值，指示圍繞活動元素繪製的 3D 邊框的寬度。
3	activeforeground => 字串指定繪製活動元素時使用的前景色。
4	anchor => 字串指定如何在小部件中顯示小部件中的資訊（例如文字或點陣圖）。必須是n、ne、e、se、s、sw、w、nw或center值之一。例如，nw表示顯示資訊，使其左上角位於小部件的左上角。
5	background 或 bg => 字串指定顯示小部件時使用的普通背景顏色。
6	bitmap => 點陣圖指定在小部件中顯示的點陣圖。點陣圖的顯示方式可能受其他選項（如 anchor 或 justify）的影響。
7	borderwidth 或 bd => 整數指定一個非負值，指示圍繞小部件外部繪製的 3D 邊框的寬度。
8	compound => 字串指定小部件是否應同時顯示文字和點陣圖/影像，如果顯示，則應相對於文字放置點陣圖/影像的位置。必須是none、bottom、top、left、right或center值之一。
9	cursor => 字串指定要用於小部件的滑鼠游標。可能的值可以是“watch”、“arrow”等。
10	disabledforeground => 字串指定繪製停用元素時使用的前景色。
11	exportselection => 布林值指定小部件中的選擇是否也應該是 X 選擇。該值可以是true、false、0、1、yes或no中的任何一個。如果匯出了選擇，則在小部件中進行選擇會取消選擇當前的 X 選擇，在小部件外部進行選擇會取消選擇任何小部件選擇，並且當小部件有選擇時，它將響應選擇檢索請求。
12	font => 字串指定在小部件內繪製文字時使用的字型。
13	foreground 或 fg => 字串指定顯示小部件時使用的普通前景色。
14	highlightbackground => 字串指定當小部件沒有輸入焦點時在遍歷高亮區域中顯示的顏色。
15	highlightcolor => 字串指定當小部件具有輸入焦點時，圍繞小部件繪製的遍歷高亮矩形所使用的顏色。
16	highlightthickness => 整數指定一個非負值，指示當小部件具有輸入焦點時，圍繞小部件外部繪製的高亮矩形的寬度。
17	image => 影像指定在小部件中顯示的影像，該影像必須使用影像建立建立。通常，如果指定了 image 選項，則它會覆蓋指定在小部件中顯示點陣圖或文字值的其他選項；image 選項可以重置為空字串以重新啟用點陣圖或文字顯示。
18	jump => 字串對於帶有可拖動滑塊以調整值的部件（例如捲軸和刻度），此選項決定何時發出有關值變化的通知。選項的值必須是布林值。如果值為false，則在拖動滑塊時會持續更新。如果值為true，則更新會延遲到滑鼠按鈕釋放以結束拖動；此時會發出單個通知。
19	justify => 字串當部件中顯示多行文字時，此選項決定這些行如何相互對齊。必須是left、center或right之一。Left表示所有行的左邊緣對齊，center表示行的中心對齊，right表示行的右邊緣對齊。
20	offset => 字串指定平鋪的偏移量（另請參見tile選項）。它可以有兩種不同的格式offset x,y或 offset side，其中side可以是n、ne、e、se、s、sw、w、nw或center。
21	orient => 字串對於可以水平或垂直方向佈局自身的部件（例如捲軸），此選項指定應使用哪種方向。必須是horizontal或vertical，或者它們的縮寫。
22	padx => 整數指定一個非負值，指示部件在X方向上請求的額外空間大小。
23	pady => 整數指定一個非負值，指示部件在Y方向上請求的額外空間大小。
24	relief => 整數指定部件所需的3D效果。可接受的值為raised、sunken、flat、ridge和groove。
25	repeatdelay => 整數指定按鈕或鍵必須按住多少毫秒才能開始自動重複。例如，在捲軸的向上和向下箭頭中使用。
26	repeatinterval => 整數與repeatdelay結合使用：一旦開始自動重複，此選項確定自動重複之間的毫秒數。
27	selectbackground => 字串指定顯示選中項時使用的背景顏色。
28	selectborderwidth => 整數指定一個非負值，指示圍繞選中項繪製的3D邊框的寬度。
29	selectforeground => 字串指定顯示選中項時使用的前景顏色。
30	setgrid => 布林值指定一個布林值，確定此部件是否控制其頂級視窗的調整大小網格。此選項通常用於文字部件，其中部件中的資訊具有自然大小（字元的大小），並且視窗的尺寸是這些單位的整數倍是有意義的。
31	takefocus => 整數提供透過鍵盤遍歷（例如，Tab和Shift-Tab）從視窗移動焦點時使用資訊。在將焦點設定為視窗之前，遍歷指令碼首先檢查視窗是否可見（它及其所有祖先都已對映）；如果不是，則跳過該視窗。值為0表示應在鍵盤遍歷期間完全跳過此視窗。1表示此視窗應始終接收輸入焦點。
32	text => 字串指定要在部件內顯示的字串。字串的顯示方式取決於具體的部件，並且可能由其他選項（例如anchor或justify）確定。
33	textvariable => 變數指定變數的名稱。變數的值是要在部件內顯示的文字字串；如果變數值更改，則部件將自動更新自身以反映新值。字串在部件中的顯示方式取決於具體的部件，並且可能由其他選項（例如anchor或justify）確定。
34	tile => 圖片指定用於顯示部件的圖片。如果圖片為空字串，則顯示正常的背景顏色。
35	troughcolor => 字串指定用於捲軸和刻度等部件中的矩形槽區域的顏色。
36	troughtile => 圖片指定用於在捲軸和刻度等部件中的矩形槽區域顯示的圖片。
37	underline => 整數指定要在部件中下劃線的字元的整數索引。此選項由預設繫結用於實現選單按鈕和選單項的鍵盤遍歷。0對應於部件中顯示文字的第一個字元，1對應於下一個字元，依此類推。
38	wraplength => 整數對於可以執行自動換行的部件，此選項指定最大行長。
39	xscrollcommand => 函式指定用於與水平捲軸通訊的回撥函式。
40	yscrollcommand => 函式指定用於與垂直捲軸通訊的回撥函式。