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 中，畫布是元件繪製的根物件。為了模擬標籤作為圓形按鈕的工作方式，我們定義一個擴充套件 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()

輸出

現在執行程式碼。您將得到一個具有圓形形狀的按鈕，如下所示：