Kivy - 圖片按鈕

Kivy 庫沒有現成的圖片按鈕小部件。它有一個普通的 Button 和一個 ToggleButton 小部件。當然，您可以使用影像檔案作為它們在正常狀態或停用狀態下的背景：

background_disabled_down - 按鈕的背景圖片是一個StringProperty，一個包含圖片檔案路徑的字串，用於按鈕被停用並按下時的預設圖形表示。
background_disabled_normal - 按鈕的背景圖片也是一個圖片路徑，用於按鈕被停用且未按下時的預設圖形表示。
background_down - 按鈕按下時使用的背景圖片，作為預設圖形表示。
background_normal - 按鈕未按下時使用的背景圖片，作為預設圖形表示。

例如，您可以使用：

B1 = Button(background_normal='images/play.png')

但是，要使圖片小部件像可點選按鈕一樣工作，您需要基於 ButtonBehavior mixin 和 Image 類定義一個自定義類，並重寫 on_press() 方法。

ButtonBehavior

在 Kivy 中，“kivy.uix.behaviors” 模組定義了行為 mixin，它們也被稱為“可重用類”，為小部件提供額外的功能。

要使用圖片作為按鈕，我們定義一個擴充套件 ButtonBehavior 的自定義類，使其能夠響應 on_press 或 on_touch 等事件，以便圖片本身可以像按鈕一樣工作。

我們使用 Kivy 的 Image 物件在 Kivy 視窗上顯示圖片。但是，要向其新增類似按鈕的行為，我們首先定義一個名為“imgbtn”的自定義類，它擴充套件了 Image 和 ButtonBehavior 類。

Image 類的 source 屬性被賦值一個字串，該字串是圖片檔案的路徑。然後我們重寫 on_press() 方法。

class imgbtn(ButtonBehavior, Image):
   def __init__(self, **kwargs):
      super(imgbtn, self).__init__(**kwargs)
   def on_press(self):
      print("Button pressed", self.source)
      ImgBtnApp.l1.text=self.source

示例

讓我們實現這個概念，在應用佈局中放置四個圖片，並將它們繫結到一個回撥函式。提供類似按鈕功能的類首先定義如下：

class imgbtn(ButtonBehavior, Image):
   def __init__(self, **kwargs):
      super(imgbtn, self).__init__(**kwargs)
   def on_press(self):
      ImgBtnApp.l1.text=self.source

我們現在將在應用程式佈局上使用此類的物件來顯示圖片，它們將觸發 on_press 事件。被點選圖片的 source 屬性將顯示在標籤上作為其文字。

from kivy.app import App
from kivy.graphics import *
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.behaviors import ButtonBehavior
from kivy.core.window import Window

Window.size = (720, 400)

class imgbtn(ButtonBehavior, Image):
   def __init__(self, **kwargs):
      super(imgbtn, self).__init__(**kwargs)

   def on_press(self):
      print("Button pressed", self.source)
      ImgBtnApp.l1.text = self.source

class ImgBtnApp(App):
   def build(self):
      main = GridLayout(cols=1)
      ImgBtnApp.l1 = Label(text='Hello', font_size=32)
      main.add_widget(ImgBtnApp.l1)
      root = FloatLayout(size=(Window.width, 100))
      with root.canvas:
         Color(.2, .7, .1, 1)
         Rectangle(pos=root.pos, size=root.size)
      
      self.btn1 = imgbtn(
         source='previous.png', size_hint=(None, None),
         pos_hint={'center_x': .2, 'center_y': .25}
      )
      self.btn2 = imgbtn(
         source='play.png', size_hint=(None, None),
         pos_hint={'center_x': .4, 'center_y': .25}
      )
      self.btn3 = imgbtn(
         source='pause.png', size_hint=(None, None),
         pos_hint={'center_x': .6, 'center_y': .25}
      )
      self.btn4 = imgbtn(
         source='stop.png', size_hint=(None, None),
         pos_hint={'center_x': .8, 'center_y': .25}
      )
      root.add_widget(self.btn1)
      root.add_widget(self.btn2)
      root.add_widget(self.btn3)
      root.add_widget(self.btn4)
      
      main.add_widget(root)
      return main
      
ImgBtnApp().run()

輸出

執行程式碼並依次點選四個按鈕。

列印頁面