Kivy 简明教程

Kivy - Round Buttons

Kivy 框架中的所有窗口小部件都呈矩形形状。按钮对象始终具有直角。因此，创建圆角按钮没有捷径可走，但我们可以通过一些技巧实现它。

Using Image as a Button

我们可以定义一个扩展 ButtonBehavior 混合和 Image 类的新类。使用任何照片编辑器创建一个类似圆形按钮的椭圆形，并将其用作 Image 对象的 source 属性。

你可以覆盖允许使用图像作为按钮的 ButtonBehavior 类中的 on_press() 方法。

from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image
class imgbtn(ButtonBehavior, Image):
   def __init__(self, **kwargs):
      super(imgbtn, self).__init__(**kwargs)
      self.source = 'hello.png'
      self.pos_hint= {'center_x':.5, 'center_y':.6}

   def on_press(self):
      print("Button pressed")

我们现在可以在 Kivy 应用程序中使用 imgbtn 对象。

KivyMD Buttons

使用 KivyMD 扩展，我们可以设计更具吸引力的界面。KivyMD 是一个 Material Design 窗口小部件集合，可用于 Kivy 应用程序。KivyMD 库提供不同的圆角按钮对象。

  1. MDRoundFlatButton

  2. MDRoundFlatIconButton

  3. MDFillRoundFlatButton

  4. MDFillRoundFlatIconButton

首先，安装 KivyMD 扩展（确保先前已经安装 Kivy 框架）

pip3 install KivyMD

应用程序类必须是 MDApp 类的子类，而不是 App 类的子类。在该示例中，我们将使用 MDRoundFlatButton 类。其大部分属性与 Kivy 按钮相同。

from kivymd.app import MDApp
from kivymd.uix.button import MDRoundFlatButton

btn = MDRoundFlatButton(
   text= 'Hello Python',
   font_size= 20,
   size_hint= (.3, .1),
   pos_hint= {'center_x':.5, 'center_y':.3},
   line_width=3
)

Example

在以下示例中，我们有一个 MDApp 类。build() 方法在应用程序窗口中放置一个图像按钮和一个 MDRoundButton 对象。

from kivymd.app import MDApp
from kivy.core.window import Window
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.image import Image
from kivy.uix.behaviors import ButtonBehavior
from kivymd.uix.button import MDRoundFlatButton

Window.size = (720, 300)

class imgbtn(ButtonBehavior, Image):
   def __init__(self, **kwargs):
      super(imgbtn, self).__init__(**kwargs)
      self.source = 'btnnormal.png'
      self.pos_hint= {'center_x':.5, 'center_y':.6}

   def on_press(self):
      print("Button pressed")

class ButtonApp(MDApp):
   def build(self):
      flo = FloatLayout()
      self.btn1 = imgbtn()
      self.btn2 = MDRoundFlatButton(
         text= 'Hello Python',
         font_size= 20, size_hint= (.3, .1),
         pos_hint= {'center_x':.5, 'center_y':.3},
         line_width=3
      )
      flo.add_widget(self.btn1)
      flo.add_widget(self.btn2)
      return flo

if __name__ == '__main__':
   ButtonApp().run()

Output

运行该应用程序。您应该得到以下具有圆角按钮的输出。

kivy round button

Using Canvas

在 Kivy 中，画布是控件绘图的根对象。为了模拟一个用作循环按钮的标签，我们定义一个类，它扩展了 ButtonBehavior 和一个标签。“kv”文件将此对象的结构定义为 -

<RoundCorneredButton>:
   canvas:
      Color:
         rgb: (1, 0, 0, 1) if self.state == 'normal' else (0, 0, 0, 1)
      RoundedRectangle:
         size: (self.size)
         pos: (self.pos)
         radius: [200, ]
   on_release:
      print("This is the button made up by the canvas")

类定义如下 -

class RoundCorneredButton(ButtonBehavior, Label):
   pass

Example

在以下应用程序代码中，我们将使用上述类和 kv 设计 -

from kivy.app import App
from kivy.uix.label import Label
from kivy.config import Config
from kivy.uix.button import ButtonBehavior
from kivy.graphics import Rectangle, Color

# Configuration
Config.set('graphics', 'width', '720')
Config.set('graphics', 'height', '300')
Config.set('graphics', 'resizable', '1')

from kivy.app import App
class RoundCorneredButton(ButtonBehavior, Label):
   pass

class HelloApp(App):
   def build(self):
      return RoundCorneredButton()

HelloApp().run()

Output

现在运行代码。您将得到一个呈圆形的按钮，如下图所示 -

kivy button circular shape