Kivy - 切換按鈕

Kivy 框架中的ToggleButton 小部件的行為有點像 Checkbox 小部件。它還有一個名為 state 的二進位制屬性，它有兩個可能的值 - **normal** 或 **down**。

ToggleButton是一個按鈕，不同之處在於，當按下按鈕時，按下和釋放事件幾乎同時發生；而當按下切換按鈕時，down 狀態會持續到再次按下將其恢復到 normal 狀態為止。

ToggleButton 的兩種狀態各有不同的背景顏色，可以透過為“background_normal”和“background_down”屬性賦值來自定義。

ToggleButton 類繼承 Button 類和 ToggleButtonBehavior mixin。它在 kivy.uix.togglebutton 模組中定義。

from kivy.uix.togglebutton import ToggleButton
toggle = ToggleButton(**kwargs)

就像 Checkbox 一樣，可以將多個 ToggleButton 物件組合在一起。預設情況下，每個切換按鈕可以用於表示兩種狀態（例如 Switch 小部件中的 ON/OFF）。但是，如果多個切換按鈕的 group 屬性值相同，則該組中只有一個處於 down 狀態。當組中的一個按鈕處於 down 狀態時，其餘按鈕將自動設定為 normal。

btn1 = ToggleButton(text='Male', group='sex',)
btn2 = ToggleButton(text='Female', group='sex', state='down')

在這種情況下，這兩個按鈕屬於同一組，因此一次只能有一個按鈕處於 down 狀態。

由於它繼承了 Button 類，因此我們可以處理切換按鈕上的 on_press 事件。此外，“on_state”事件可以繫結到其 state 屬性。

示例 1

以下程式碼放置了三個未分組的 Toggle 按鈕。因此，每個按鈕都可以設定為 normal 或 down 狀態。在下面的示例中，這些切換按鈕表示使用者可以選擇感興趣的科目。

self.button1 = ToggleButton(text ="Sports", font_size=32)
self.button2 = ToggleButton(text='Music', font_size=32)
self.button3 = ToggleButton(text='Travel', font_size=32)

它們繫結到回撥函式以識別每個按鈕的狀態。

self.button1.bind(on_press=self.btn1pressed)
self.button2.bind(on_press=self.btn2pressed)
self.button3.bind(on_press=self.btn3pressed)

每個回撥方法都檢查狀態是否為 down，並相應地更新標籤文字。

def btn1pressed(self, instance):
   if instance.state=='down':
      self.sports='Sports'
   else:
      self.sports=''
   self.l1.text="{} {} {}".format(self.sports, self.music, self.travel)

此練習的完整程式碼如下所示：

from kivy.app import App
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window

Window.size = (720, 350)

class toggledemoapp(App):
   def build(self):
      self.sports = self.music = self.travel = ''

      layout = GridLayout(cols=1, padding=10)
      box = BoxLayout(orientation='horizontal')

      lbl = Label(text="My Interests", font_size=40)
      layout.add_widget(lbl)

      self.l1 = Label(
         text='Choose One or More', font_size=32,
         color=[.8, .6, .4, 1]
      )
      layout.add_widget(self.l1)
      
      self.button1 = ToggleButton(text="Sports", font_size=32)
      self.button2 = ToggleButton(text='Music', font_size=32)
      self.button3 = ToggleButton(text='Travel', font_size=32)

      self.button1.bind(on_press=self.btn1pressed)
      self.button2.bind(on_press=self.btn2pressed)
      self.button3.bind(on_press=self.btn3pressed)

      box.add_widget(self.button1)
      box.add_widget(self.button2)
      box.add_widget(self.button3)

      layout.add_widget(box)
      return layout

   def btn1pressed(self, instance):
      if instance.state == 'down':
         self.sports = 'Sports'
      else:
         self.sports = ''
      self.l1.text = "{} {} {}".format(self.sports, self.music, self.travel)

   def btn2pressed(self, instance):
      if instance.state == 'down':
         self.music = 'Music'
      else:
         self.music = ''
      self.l1.text = "{} {} {}".format(self.sports, self.music, self.travel)

   def btn3pressed(self, instance):
      if instance.state == 'down':
         self.travel = 'Travel'
      else:
         self.travel = ''
      self.l1.text = "{} {} {}".format(self.sports, self.music, self.travel)

toggledemoapp().run()

輸出

應用程式以所有按鈕都處於 normal 狀態開啟。嘗試將其中任何一個設定為“down”。

示例 2

下面的示例將標籤和切換按鈕組合在一起，佈局與上圖類似，不同之處在於切換按鈕現在組合在一起。

我們將使用“kv”指令碼設計應用程式佈局。Mylayout 類用作應用程式的根，並使用 GridLayout 作為其基類。

class Mylayout(GridLayout):
   def callback(self, *args):
      print (args[0].text)
      self.ids.l1.text=args[0].text

class togglegroupapp(App):
   def build(self):
      return Mylayout()
      
togglegroupapp().run()

這是“kv”語言指令碼。它將三個切換按鈕放在水平框中，該水平框又是一個單列網格佈局的一部分。所有按鈕的 group 屬性都具有相同的值“branch”，並且繫結到上面 MyLayout 類的 callback() 方法。callback() 方法將導致 on_press 事件的按鈕的標題放在標籤上，以顯示使用者選擇了哪個分支。

<Mylayout>:
   size: root.width, root.height
   cols:1
   Label:
      text:"Which is your Engineering branch?"
      font_size:40
   Label:
      id:l1
      text: 'Choose Any One'
      font_size:32
      color:[.8,.6,.4,1]
   BoxLayout:
      orientation:'horizontal'
      ToggleButton:
         text : "Electronics"
         font_size : 32
         group:'branch'
         on_press:root.callback(*args)
      ToggleButton:
         text:'Mechanical'
         font_size:32
         group:'branch'
         on_press:root.callback(*args)
      ToggleButton:
         text:'Comp.Sci'
         font_size:32
         group:'branch'
         on_press:root.callback(*args)

輸出

執行程式並嘗試按鈕狀態，如下所示：