close

如何用tkinter combobox部件製作下拉項次選單

當我們在設計用戶互動介面時,遇到要在一系列的選擇項目讓用戶從中只能挑選一個項目時,在視覺上要展現出平常是收合的選單項目,因為不占空間(通常會出現在項目右方帶有往下箭頭的圖案)但當滑鼠點擊圖案時能彈跳出往下的清單列並展示所有的項目供用戶挑選,而且能在挑選完成後會呈現出被挑選的項目時,combobox部件無疑的是最好的選擇。

Combobox很像是entry部件及listbox部件的結合,往下展開的選單就像是listbox的功能,而選擇後會出現被挑選的項目就像是entry部件的功能,只是這個項目是被挑選出來而不是輸入而來的。

舉些例子吧,其實我們日常在網路購物時就一定會碰到這樣的設計需要,購買衣服時需要選擇尺寸(SMLXL)、購買的數量(12345)、運送地址的縣市選擇(台北市、新北市、基隆市、….)、行政區的選擇(中正區、中山區、大安區、…..),所以在設計用戶互動介面時,我們不時地會運用到這樣的設計。當然,若我們不透過combobox也可以靠entrylistbox兩個部件來滿足同樣的功能,但還好在ttk模組(ttk模組也可以稱為tkinter的一個子模組)中有combobox的出現,讓整個設計上變得很簡單,只是您要記得,要引用combobox部件時,必需用ttk.Combobox指令,因為在tkinter中不存在這個部件,所以您用tk.Combobox因為呼叫不到會產生程式語法錯誤,必需使用ttk.Combobox才行。

我們就來示範一下建立combobox的步驟及過程中取值的運用:

  • 產生一個下拉選單物件combobox1

為了讓使用者了解這個項目的標題,我們會在下拉選單前建立一個label部件,以用來建立下拉選單的名稱,並且給予label部件標題內容為『商品運送縣市』,完成label部件的建立後,接在後面的就是combobox部件。

產生combobox(下拉選單)部件的語法:

需先import

下拉選單物件(自訂名稱) = ttk.Combobox ( 基底視窗, option=value, ... )

我們建立一個下拉選單物件combobox1,完整指令的範例如下

combobox1=ttk.Combobox(window,value=(`台北市`, `新北市`, `基隆市`…..,textvariable=city,state=readonly)

參數設定的說明:

運用value= 用來定義選單中的所有的可選擇項目

運用textvariable= 定義這個選單部件所會承接用戶選擇後產生的值

運用state=readonly` 可以達到選單部件的選項是無法編輯的(有興趣您也可試試state=disable`的差異,預設值為`normal`)。

combobox1.current(0)

我們運用這個指令來預設畫面起始時的樣貌,一開始時選單項目會出現第一個選項(您應該有印象,在python的運用中,很多地方的索引值中0通常代表第一個值。),若少了這行指令,您會發覺程式執行後,下拉選單預設的內容就變成是空白。所以我們可以善加運用 下拉選單物件.current(數字)來呈現您所要的選單項目。

  • 下拉選單物件操作後的結果取得

首先,我們需使用以下的指令

combobox1.bind("<<ComboboxSelected>>", printfunc)

這行指令稍微進階一些,bind是下拉選單物件的一個成員函式,很明顯的,指令的目的是要綁定下拉選單物件跟事件之間的關係,這行指令翻成白話,就是當下拉選單物件在ComboboxSelected事件發生時我們需要呼叫一個名稱為printfunc的函式。

選單物件.bind的語法如下

combobox物件.bind("<<ComboboxSelected>>", callFunc)

在這邊,ComboboxSelected代表的是選單物件經過用戶選擇操作的事件,一旦下拉選單物件一經用戶操作選擇,ComboboxSelect事件就成立,同此時,我們定義事件發生後需呼叫callFunc,前面的ComboboxSelected是標準的名稱代表選單選擇事件發生,必須跟這裡所寫的一模一樣(包含大小寫),後面的callFunc是示意,代表著事件發生後牽動到呼叫哪個函式,函式的名稱您可以自訂,但您也必需在程式中設計這個函式讓它存在。

以下就是我們上面所說的必需存在所呼叫的函式

def printfunc(a):

    print("客戶選擇的城市",combobox1.get())

呼應上方對於下拉選單物件綁定事件的語法說明中,我們必須定義一個存在程式中的函式,在這個示範的程式中,這個函式的目的是要顯示出當用戶在選單中選擇的項目內容,是不是我們可以正確的取得選擇項目。我們透過 物件.get()來取的這個變數的值,並將這個值顯示出來。

整個完整的程式碼如下

combobox1.png

執行後的結果如下

combobox2.png

以上,我們用很通俗且很生活化的例子說明下拉選單的應用,在未來的使用者介面設計中,combobox是一個很好用的部件,透過ttk的提供,讓我們在運用中變得更便利。

 

arrow
arrow

    阿丹 發表在 痞客邦 留言(0) 人氣()