Kivy - 頁面佈局

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 建構函式 -

anim_kwargs - 用於構造動畫的動畫 kwargs。它是一個 DictProperty，預設為 {'d': .5, 't': 'in_quad'}。
border - 當前頁面周圍邊框的寬度，用於在需要時顯示前一個/下一個頁面的滑動區域。它是一個 NumericProperty，預設為 50dp。
page - 當前顯示的頁面，它是一個 NumericProperty，預設為 0。
swipe_threshold - 用於觸發滑動的閾值，以元件大小的比率表示。swipe_threshold 是一個 NumericProperty，預設為 0.5。

PageLayout 識別觸控事件，您可以覆蓋以下事件處理程式 -

on_touch_down(touch) - 接收一個觸控按下事件，觸控引數為 MotionEvent 類。它返回一個布林值。如果為 True，則觸控事件的排程將停止。如果為 False，則事件將繼續排程到其餘的元件樹。
on_touch_move(touch) - 接收一個觸控移動事件。觸控位於父座標系中。
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

執行時，顯示標題為“page 1”的按鈕。按住滑鼠並從右向左滑動，以顯示第二個和第三個頁面。從左向右滑動將使前一個頁面聚焦。

示例

在以下示例中，我們在 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}

輸出

儲存“PageDemoApp.py”和“PageDemo.kv”這兩個檔案，然後執行 Python 指令碼。您應該首先看到註冊頁面。

現在，在應用程式視窗中從右向左滑動螢幕，使登入頁面顯示 -

列印頁面