Kivy 简明教程

Kivy - Page Layout

Kivy 中的 PageLayout 类与 Kivy 中的其他容器小部件略有不同。通过 PageLayout，您可以创建简单的多页布局，以便使用边框轻松地从一页翻页到另一页。

通过从右侧或左侧的边框区域轻扫来实现从一页到下一页的过渡。由于 PageLayout 不支持 size_hint、size_hint_min、size_hint_max 或 pos_hint 属性，因此每页只能显示一个小部件。但是，您可以通过将复合布局对象（如框布局、网格布局或浮动布局）置于单个页面中，在页面中放置多个小部件。

PageLayout 类在“kivy.uix.pagelayout”模块中定义。

from kivy.uix.pagelayout import PageLayout
pg = PageLayout(**kwargs)

您可以将以下属性定义为 PageLayout 构造函数的关键字参数 −

  1. anim_kwargs − 用于构建动画的动画 kwargs。它是一个 DictProperty，默认值为 {'d': .5, 't': 'in_quad'}。

  2. border − 当前页面周围边框的宽度，用于在需要时显示上一页/下一页轻扫区域。它是一个 NumericProperty，默认值为 50dp。

  3. page − 当前显示的页面，是 NumericProperty，默认为 0。

  4. swipe_threshold − 用作滑动阈值的部件大小比率。swipe_threshold 是 NumericProperty，默认为 0.5。

PageLayout 识别触摸事件，而且可以覆盖以下事件处理程序 −

  1. on_touch_down(touch) − 使用 MotionEvent 课程以触摸参数接收触摸按下事件。它返回一个布尔值。如果是 True，将停止分派触摸事件。如果是 False，将继续向其他部件树分派事件。

  2. on_touch_move(touch) - 接收触摸移动事件。touch 位于父坐标中。

  3. n_touch_up(touch) − 接收触摸抬起事件。触摸位于父坐标中。

以下是一个简单的 PageLayout 示例。我们将三个按钮放置为单独的页面。

class PageApp(App):
   def build(self):
      pg = PageLayout()
      btn1 = Button(text ='Page 1')
      btn2 = Button(text ='Page 2')
      btn3 = Button(text ='Page 3')
      pg.add_widget(btn1)
      pg.add_widget(btn2)
      pg.add_widget(btn3)
      return pg

运行后，将显示带有页面 1 标题的 Button。在按下鼠标的情况下从右向左滑动，以显示第二个和第三页。从左向右滑动将使前一页成为焦点。

kivy page layout

Example

在以下示例中，我们在 PageLayout 中添加了两个浮动布局。“kv”文件用于设计 UI。

首先是运行 PageLayout 应用程序的 Python 代码 −

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.textinput import TextInput
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.pagelayout import PageLayout
from kivy.config import Config

Config.set('graphics', 'width', '720')
Config.set('graphics', 'height', '400')
Config.set('graphics', 'resizable', '1')

class PageDemoApp(App):
   def build(self):
      pass

if __name__ == '__main__':
   PageDemoApp().run()

以下是“PageDemo.kv”文件脚本。PageLayout 嵌入了 FloatLayout 对象。上层的浮动布局是注册页面的设计，而下层的浮动布局则是第二页，该页面包含登录屏幕。

PageLayout:
   FloatLayout:
      orientation:'vertical'
      Label:
         text:'Register'
         font_size:'20pt'
         pos_hint:{'center_x': .5, 'center_y': .9}
      Label:
         text:"Name"
         size_hint:(.2, .1)
         pos_hint:{'x':.2, 'y':.75}

      TextInput:
         size_hint:(.4, .1)
         pos_hint:{'x':.3, 'y':.65}

      Label:
         text:"email"
         size_hint:(.2, .1)
         pos_hint:{'x':.2, 'y':.55}

      TextInput:
         size_hint:(.4, .1)
         pos_hint:{'x':.3, 'y':.45}

      Label:
         text:"Password"
         size_hint:(.2, .1)
         pos_hint:{'x':.2, 'y':.35}

      TextInput:
         password:True
         size_hint:(.4, .1)
         pos:(400, 150)
         pos_hint:{'x':.3, 'y':.25}

      Button:
         text:'Submit'
         size_hint : (.2, .1)
         pos_hint : {'center_x':.5, 'center_y':.09}

   FloatLayout:
      orientation:'vertical'
      size:(720,400)
      canvas.before:
         Color:
            rgba: 0,0,0, 1
         Rectangle:
            pos: self.pos
            size: self.size

      Label:
         text:"Login"
         font_size: '30pt'
         pos_hint:{'center_x': .5, 'center_y': .75}
      Label:
      text:"email"
      size_hint:(.2, .1)
      pos_hint:{'x':.2, 'y':.55}

      TextInput:
         size_hint:(.4, .1)
         pos_hint:{'x':.3, 'y':.45}

      Label:
         text:"Password"
         size_hint:(.2, .1)
         pos_hint:{'x':.2, 'y':.35}

      TextInput:
         password:True
         size_hint:(.4, .1)
         pos:(400, 150)
         pos_hint:{'x':.3, 'y':.25}

      Button:
         text:'Submit'
         size_hint : (.2, .1)
         pos_hint : {'center_x':.5, 'center_y':.09}

Output

保存“PageDemoApp.py”和“PageDemo.kv”文件，然后运行 Python 脚本。首先应该看到注册页面。

kivy page layout register

现在，从右向左滑动屏幕，使登录页面出现在应用程序窗口中 −

kivy page layout login