Kivy - 選項卡面板

許多 GUI 工具包都包含選項卡面板，因為它可以非常方便地將介面控制元件分組顯示，而不是一個大型表單，遠遠超出了顯示裝置的尺寸。Kivy 中的 TabbedPanel 控制元件使能夠在不同的面板中顯示控制元件或佈局，而不會使 GUI 設計顯得笨拙。不同面板中的控制元件可以相互共享資料。

不同的選項卡顯示為頂部的選單，其中包含用於實際選項卡按鈕的標題區域和用於顯示當前選項卡內容的內容區域。

TabbedPanel 物件是用於一個或多個面板的頂級容器。對於每個面板，都會新增一個 TabbedPanelItem 物件。每個 TabbedPAnelItem 又可以容納任何一個控制元件或包含多個控制元件的佈局（例如 GridLayout 或 BoxLayout 等）。

這兩個類都定義在 kivy.uix.tabbedpanel 模組中。

from kivy.uix.tabbedpanel import TabbedPanel, TabbedPanelItem

構建選項卡面板的示意圖如下所示：

main=TabbedPanel()
tab1=TabbedPanelItem(text='Tab 1')
Label=Label(text='Label')
tab1.add_widget(label)
tab2=TabbedPanelItem(text='Tab 2')
btn=Button(text="Button")
tab2.add_widget(btn)
main.add_widget(tab1)
main.add_widget(tab2)

可以透過調整一些屬性進一步自定義選項卡面板：

可以透過將 tab_pos 屬性設定為以下值之一來選擇顯示選項卡的位置：left_top、left_mid、left_bottom、top_left、top_mid、top_right、right_top、right_mid、right_bottom、bottom_left、bottom_mid、bottom_right。

每個選項卡都有一個特殊的按鈕 TabbedPAnelHeader，其中包含一個內容屬性。
選項卡面板帶有一個預設選項卡，可以透過將 do_default_tab 設定為 False 來將其刪除。

如果顯示預設選項卡，則提供 on_default_tab 事件以關聯回撥：

tp.bind(default_tab = my_default_tab_callback)

可以透過多種方式刪除選項卡和內容：

tp.remove_widget() 刪除選項卡及其內容。
tp.clear_widgets() 清除內容區域中的所有控制元件。
tp.clear_tabs() 刪除 TabbedPanelHeaders。

示例

在下面的示例中，我們使用兩個選項卡面板，第一個用於顯示簡單的登錄檔單，另一個用於顯示登入表單。

我們將使用“kv”語言指令碼構建設計。

預設選項卡已刪除。
第一個選項卡包含一個 2 列網格佈局，幷包含標籤和文字輸入框，供使用者輸入其詳細資訊，然後是“提交”按鈕。
第二個選項卡也包含一個兩列網格，允許已註冊使用者輸入電子郵件和密碼。

TabbedPanel:
   size_hint: .8, .8
   pos_hint: {'center_x': .5, 'center_y': .5}
   do_default_tab: False
   TabbedPanelItem:
      text:"Register Tab"
      GridLayout:
         cols:2
         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}

   TabbedPanelItem:
      text:'Login Tab'
      GridLayout:
         cols:2
      
      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}

利用上述“kv”指令碼設計的應用程式程式碼如下所示：

from kivy.app import App
from kivy.core.window import Window

Window.size = (720,300)

class TabDemoApp(App):
   def build(self):
      pass
      
TabDemoApp().run()

輸出

執行上述程式碼後，應用程式視窗將顯示選項卡面板，並顯示第一個選項卡的內容。點選“登入”選項卡以檢視第二個選項卡的內容。

列印頁面