Kivy 简明教程

Kivy - Image Button

Kivy 库没有一个开箱即用的图像按钮控件。它有一个正常的按钮和一个切换按钮控件。您当然可以在正常状态或禁用状态下使用图像文件作为它们的背景 -

  1. background_disabled_down − 按钮的背景图片是一个 StringProperty，包含指向图像文件的路径的字符串，当按钮被禁用并按下时用作默认图形表示。

  2. background_disabled_normal − 按钮的背景图片也是一条图像路径，当按钮被禁用并且未按下时用作默认图形表示。

  3. background_down − 在按下按钮时作为默认图形表示使用的按钮的背景图像。

  4. 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 的图像对象在 Kivy 窗口上显示图像。但是，为了向其添加类似按钮的行为，我们首先定义一个名为“imgbtn”的自定义类，该类扩展了 Image 和 ButtonBehavior 类。

图像类的 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

Example

让我们实现这一概念，并在应用程序布局中放置四张图像，并将其绑定到一个回调。为图像提供类似按钮的功能的类首先定义如下 -

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

我们现在将在应用程序布局上使用此类的对象来显示图像，它们将引发 on_press 事件。单击的图像的源属性将作为其文本显示在标签上。

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()

Output

运行代码，逐个单击四个按钮中的每一个。

kivy image button