Kivy - 氣泡選單



Kivy 框架包含一個氣泡(Bubble)小部件,它是一個帶有箭頭的小型彈出選單,箭頭可以位於內容的任意一側。箭頭的方向可以根據需要進行配置。您可以透過設定其“arrow_pos”屬性的相對位置來放置它。

氣泡的內容放置在“BubbleContent”物件中,它是 BoxLayout 的一個子類。可以水平或垂直放置一個或多個 BubbleButtons。雖然建議使用 BubbleButtons,但您也可以在氣泡的內容中新增任何小部件。

Kivy Bubble

Bubble、BubbleContent 和 BubbleButton 類在 kivy.uix.bubble 模組中定義。

from from kivy.uix.bubble import Bubble

Bubble 類的以下屬性有助於自定義氣泡選單的外觀和行為:

  • arrow_color - 箭頭顏色,格式為 (r, g, b, a)。要使用它,必須先設定 arrow_image,預設為 [1, 1, 1, 1]。

  • arrow_image - 指向氣泡的箭頭影像。

  • arrow_margin - 自動計算的箭頭小部件在 x 和 y 方向上佔據的邊距(以畫素為單位)。

  • arrow_pos - 指定箭頭的方向,選擇預定義值之一:left_top、left_mid、left_bottom、top_left、top_mid、top_right、right_top、right_mid、right_bottom、bottom_left、bottom_mid、bottom_right。預設值為 'bottom_mid'。

  • content - 這是儲存氣泡主要內容的物件。

  • show_arrow - 指示是否顯示箭頭。預設為 True。

  • BubbleButton - 用於 BubbleContent 小部件的按鈕。您可以使用“普通”按鈕代替它,但是除非更改背景,否則它可能看起來不太好。

  • BubbleContent - 一個經過樣式化的 BoxLayout,可以用作氣泡的內容小部件。

以下示意圖使用 “kv” 語言指令碼構建一個簡單的 Bubble 物件:

Bubble:
   BubbleContent:
      BubbleButton:
         text: 'Button 1'
      BubbleButton:
         text: 'Button 2'

與普通按鈕一樣,我們可以將 BubbleButton 繫結到其“on_press”事件的回撥函式。

示例

執行以下程式碼時,它會顯示一個普通按鈕。單擊時,會彈出一個帶有三個 BubbleButtons 的氣泡選單。每個 BubbleButtons 都呼叫一個 pressed() 回撥方法,該方法讀取按鈕的標題並在控制檯中列印它。

我們使用以下“kv”語言指令碼組裝氣泡選單。定義了一個名為“Choices”的類,它繼承自“kivy.uix.bubble.Bubble”類。

class Choices(Bubble):
   def pressed(self, obj):
      print ("I like ", obj.text)
      self.clear_widgets()

該類具有 pressed() 例項方法,由每個 BubbleButton 呼叫。

以下是“kv”指令碼:

<Choices>
   size_hint: (None, None)
   size: (300, 150)
   pos_hint: {'center_x': .5, 'y': .6}
   canvas:
      Color:
         rgb: (1,0,0)
      Rectangle:
         pos:self.pos
         size:self.size
   BubbleContent:
      BubbleButton:
         text: 'Cricket'
         size_hint_y: 1
         on_press:root.pressed(self)
      BubbleButton:
         text: 'Tennis'
         size_hint_y: 1
         on_press:root.pressed(self)
      BubbleButton:
         text: 'Hockey'
         size_hint_y: 1
         on_press:root.pressed(self)

BoxLayout 小部件充當主應用程式視窗的根小部件,包含一個按鈕和一個標籤。“on_press”事件呼叫“show_bubble()”方法,該方法彈出氣泡。

class BubbleTest(FloatLayout):
   def __init__(self, **temp):
      super(BubbleTestApp, self).__init__(**temp)
      self.bubble_button = Button(
         text ='Your favourite Sport',
         pos_hint={'center_x':.5, 'center_y':.5},
         size_hint=(.3, .1),size=(300, 100)
      )
      self.bubble_button.bind(on_release = self.show_bubble)
      self.add_widget(self.bubble_button)

   def show_bubble(self, *arg):
      self.obj_bub = Choices()
      self.add_widget(self.obj_bub)

驅動程式 App 類程式碼如下:

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.bubble import Bubble
from kivy.properties import ObjectProperty
from kivy.core.window import Window

Window.size = (720,400)

class MybubbleApp(App):
   def build(self):
      return BubbleTest()

MybubbleApp().run()

輸出

應用程式在主視窗的中心顯示一個按鈕。單擊時,您應該在它上面看到氣泡選單。

Kivy Bubble Menu

每次單擊氣泡中的任何選項時,控制檯都會顯示結果並隱藏氣泡。

I like Tennis
I like Hockey
廣告