Kivy 简明教程

Kivy - Toggle Button

Kivy 框架中的 ToggleButton 小组件的行为有点像 Checkbox 小组件。它还有一个名为 state 的二进制属性，它有两个可能的值− normal 或 down 。

ToggleButton 与按钮不同，当按下按钮时，按下和释放事件几乎同时发生；而当按下切换按钮时，下降状态将一直持续到再次按下使其恢复到正常状态。

kivy toggle button

ToggleButton 的两个状态对于每个状态都有一个不同的背景颜色，可以通过将值分配给“background_normal”和“background_down”属性来自定义颜色。

ToggleButton 类继承 Button 类并使用 ToggleButtonBehavior 混合。它在 kivy.uix.togglebutton 模块中定义

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

就像 Checkbox 一样，多个 ToggleButton 对象可以组合在一起。默认情况下，每个切换按钮可用于表示两个状态（例如 Switch 小组件中的 ON/OFF）。但是，如果多个切换按钮的 group 属性具有相同的值，则只有组中的一个按钮处于下降状态。当其中一个分组按钮处于下降状态时，其余按钮将自动设置为正常状态。

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

在这种情况下，两个按钮属于同一组，因此一次只能有一个按钮处于下降状态。

由于它继承了 Button 类，因此我们可以在切换按钮上处理 on_press 事件。此外，“on_state”事件可以绑定到其 state 属性。

Example 1

下面的代码增加了三个未分组的切换按钮。因此，每个按钮都可以设置成正常状态或关闭状态。在下面的例子中，这些切换按钮代表用户要选择的主题。

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)

每个回调方法都会检查状态是否关闭，并相应地更新标签文本。

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

Output

该应用程序以所有按钮都处于正常状态打开。尝试将其中任何一个按钮设置为“关闭”。

kivy toggle button choose

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

Output

运行程序并尝试按钮状态，如下所示

kivy toggle button branch