Kivy - 手风琴

更新于 2024/6/13 10:47:55

由于此 GUI 小部件与同名乐器相似，因此被称为"手风琴"。在 Kivy 中，手风琴是一个图形控制元素，包含垂直或水平堆叠的项目列表，例如标签、按钮或图像。

就像音乐手风琴中可以通过向外拉来展开风箱的各个部分一样，每个项目都可以"展开"或"折叠"以显示与该项目相关的内容。根据配置，可以一次展开零个项目、恰好一个或多个项目。

手风琴的用途类似于选项卡式面板，即项目列表，其中恰好一个项目展开到面板中。

"kivy.uix.accordion"模块中有两个重要的类 - "Accordion"和"AccordionItem"。每个 AccordianItem 对象都包含任何一个 Kivy 小部件，例如标签、按钮、图像甚至其他布局对象。然后将多个 AccordioItem 添加到主 Accordion 对象。

Accordion 类支持以下属性/方法 −

title − AccordionItem 的标题字符串。
min_space − 用于每个项目标题的最小空间。每次发生布局事件时，都会自动为每个子项设置此值。它是一个 NumericProperty，默认为 44 (px)。
orientation − Accordion 布局的方向。可以是垂直的，也可以是水平的。
collapse −布尔属性，用于指示当前项目是否折叠。

示例 1

在下面的代码中，Accordion 对象用作应用程序窗口的根窗口小部件。标签、按钮和图像窗口小部件分别添加到其每个 AccordionItem 窗口小部件中。

完整代码如下 −

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.accordion import Accordion, AccordionItem
from kivy.core.window import Window

Window.size = (720,400)

class accordiandemoapp(App):
   def build(self):
      acc=Accordion(orientation='horizontal')
      item1=AccordionItem(title='Text Panel')
      item1.add_widget(Label(text='Hello World'))
      
      item2=AccordionItem(title='Button Panel')
      self.btn=Button(text='ok')
      item2.add_widget(self.btn)
      
      item3=AccordionItem(title='Image Panel')
      img = Image()
      img.source='kivy-logo.png'
      
      item3.add_widget(img)
      acc.add_widget(item1)
      acc.add_widget(item2)
      acc.add_widget(item3)
      
      return acc
   
accordiandemoapp().run()

输出

运行上述程序并单击图像面板，以显示其内容，即 Kivy 徽标。

您可以通过单击其他面板来进一步展开它们。

示例 2（使用"kv"脚本）

我们删除 build() 方法中的所有语句，将其替换为 pass 语句，然后将以下脚本保存为 accordiondemo.kv 文件。这次 Accordion 的默认方向更改为垂直。

BoxLayout:
   orientation: "vertical"
   size: root.width, root.height
   
   Accordion:
      orientation: 'vertical'

      AccordionItem:
         title: "Button Panel"
         Button:
            text: 'OK'
            
      AccordionItem:
         title: "Text Panel"
         Label:
            text: "Hello World"
            font_size: 32
      AccordionItem:
         title: "Image Panel"
         Image:
            source: 'kivy-logo.png'