Kivy - 下拉列表

Kivy 中的下拉小部件與其他 GUI 工具包中的類似小部件有很大不同。Kivy 的下拉選單不僅顯示標籤，還顯示其他任何小部件，例如按鈕、影像等。

DropDown 類在“kivy.uix.dropdown”模組中定義。

from kivy.uix.dropdown import DropDown
dropdown=DropDown()

構造下拉物件需要以下步驟：

• 在向此物件新增其他小部件時，我們需要透過停用 size_hint 手動指定高度，從而下拉選單計算所需區域。

• 對於在 DropDown 中新增的每個子小部件，您都需要附加一個回撥函式，該函式將在下拉選單上呼叫 select() 方法。繫結每個子項並新增到下拉選單物件中。

• 將下拉選單新增到主按鈕並將其與下拉選單類的 open() 方法繫結。

• 最後，執行應用程式並單擊主按鈕。您將看到一系列子小部件向下展開。單擊其中任何一個以呼叫其關聯的回撥函式。

示例

在此示例中，我們將演示 Kivy 中的下拉小部件如何工作。我們將使用 for 迴圈向下拉選單新增十個按鈕，如下所示：

dropdown = DropDown()

for index in range(1, 11):
   btn = Button(text ='Button '+str(index),
      size_hint_y = None, height = 40)
   btn.bind(on_release = lambda btn: dropdown.select(btn.text))
   dropdown.add_widget(btn)

box.add_widget(dropdown)

我們將主按鈕放置在 BoxLayout 中，將下拉選單物件新增到其中，並將主按鈕與下拉選單物件的 open() 方法繫結。

box = BoxLayout(orientation='vertical')
mainbutton = Button(text ='Drop Down Button', size_hint=(None, None), size =(250, 75), pos_hint ={'center_x':.5, 'top':1})
box.add_widget(mainbutton)
mainbutton.add_widget(dropdown)
mainbutton.bind(on_release = dropdown.open)

最後，我們需要監聽下拉列表中的選擇並將資料分配給按鈕文字。

dropdown.bind(on_select = lambda instance, x: setattr(mainbutton, 'text', x))

以下程式碼中 App 類中的 build() 方法包含所有這些步驟：

from kivy.app import App
from kivy.uix.dropdown import DropDown
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.core.window import Window

Window.size = (720, 400)

class Drop_down_app(App):
   def build(self):
      box = BoxLayout(orientation='vertical')

      mainbutton = Button(
         text='Drop Down Button', size_hint=(None, None),
         size=(250, 75), pos_hint={'center_x': .5, 'top': 1}
      )
      box.add_widget(mainbutton)
      dropdown = DropDown()
      for index in range(1, 11):
         btn = Button(text='Button ' + str(index),
            size_hint_y=None, height=40)
         btn.bind(on_release=lambda btn: dropdown.select(btn.text))
      dropdown.add_widget(btn)
      box.add_widget(dropdown)
      
      mainbutton.add_widget(dropdown)
      mainbutton.bind(on_release=dropdown.open)

      dropdown.bind(on_select=lambda instance, x: setattr(mainbutton, 'text', x))
      return box
      
Drop_down_app().run()

輸出

當我們執行上述程式碼時，主按鈕可見。

單擊按鈕。結果，按鈕列表向下展開。當單擊列表中的按鈕時，主按鈕的標題將更改為該按鈕的標題。