Kivy 简明教程

Kivy - Accordion

此 GUI 小工具因为与同名的乐器相似，被称为“手风琴”。在 Kivy 中，手风琴是图形控制元素，由水平或垂直堆叠的项目列表组成，例如标签或按钮或图像。

就像音乐手风琴在可以拉出风箱部分一样，每个项目都可以“展开”或“折叠”以显示与该项目关联的内容。可以同时展开零个项目、一个项目或多个项目，具体取决于配置。

手风琴在用途上类似于选项卡面板，是一个列表，其中只有一个项目会展开为面板。

“kivy.uix.accordion”模块中有两个重要的类——“Accordion”和“AccordionItem”。每个 AccordionItem 对象持有任何一个 Kivy 小工具，例如标签、按钮、图像甚至其他布局对象。最终将多个 AccordionItem 添加到主 Accordion 对象。

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

  1. title —— 手风琴项的标题字符串。

  2. min_space —— 用每个项目的标题的最小空间。此值在布局事件发生时为每个子项自动设置。它是一个 NumericProperty，默认为 44（px）。

  3. orientation —— 手风琴布局的方向。可以是垂直或水平。

  4. collapse —— 布尔属性，表示当前项目是否已折叠。

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

Output

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

kivy accordion

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

Example 2 (using "kv" script)

我们删除 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'

Output

运行程序后，按钮面板将展开 -

kivy accordion button panel