Kivy - 圆形按钮



Kivy 框架中的所有组件都是矩形的。按钮对象始终具有直角。因此,创建具有圆角的按钮没有直接的解决方案,但是我们可以通过一些技巧来实现它。

使用图像作为按钮

我们可以定义一个扩展 ButtonBehavior mixin 和 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 按钮

使用 KivyMD 扩展,我们可以设计更具吸引力的界面。KivyMD 是一个材料设计组件的集合,用于 Kivy 应用。KivyMD 库提供了具有圆角的不同按钮对象。

  • MDRoundFlatButton
  • MDRoundFlatIconButton
  • MDFillRoundFlatButton
  • MDFillRoundFlatIconButton

首先,安装 KivyMD 扩展(确保事先安装了 Kivy 框架)

pip3 install KivyMD

App 类必须是 MDApp 类的子类,而不是 App 类。在这个例子中,我们将使用 MDRoundFlatButton 类。它的许多属性与 Kivy Button 相同。

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
)

示例

在下面的例子中,我们有一个 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()

输出

运行应用程序。您应该得到以下输出,其中包含圆角按钮。

Kivy Round Button

使用画布

在 Kivy 中,画布是组件绘制的根对象。为了模拟标签作为圆形按钮的工作方式,我们定义一个扩展 ButtonBehavior 和 Label 的类。“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

示例

我们将在下面的 App 代码中使用上面的类和 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()

输出

现在运行代码。您将得到一个具有圆形形状的按钮,如下所示:

Kivy Button Circular Shape
广告
© . All rights reserved.