Kivy UIX篇 widget篇 TabbedPanel類 attribute篇 講解

簡述

根據官方解釋:

The TabbedPanel widget manages different widgets in tabs, with a header area for the actual tab buttons and a content area for showing the current tab content.

意思是TabbedPanel部件管理選項卡中的不同小部件，其中包含實際選項卡按鈕的標題區域和用於顯示當前選項卡內容的內容區域。

示意圖如下:

基本範例

首先在main.py中寫上起手式:

from kivy.app import App
from kivy.uix.gridlayout import GridLayout

class MyLayout(GridLayout):
    pass

class Myapp(App):
    def build(self):
        return MyLayout()

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

在以上程式碼中，我讓MyLayout類繼承GridLayout類，使得在my.kv中的<MyLayout>:可以繼承GridLayout類的特性。

在my.kv中寫上此段程式碼:

<MyLayout>:
    rows: 2

    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}
    #以上程式碼主要是為了更好呈現結果而調整GridLayout

    TabbedPanel:

        TabbedPanelItem:
            text: 'A1' #TabbedPanelItem的標題名稱
            #TabbedPanelItem的內容
            Label:
                text: 'B2'

        TabbedPanelItem:
            text: 'C3'
            BoxLayout:
                Label:
                    text: 'D4'
                Button:
                    text: 'E5'

        TabbedPanelItem:
            text: 'F6'
            TextInput:
                text: 'G7'

    Label:
        text: 'ABC'

執行結果如下:

TabbedPanel使用技巧:

1.決定背景顏色與圖片

程式碼如下:

<MyLayout>:
    rows: 2

    size_hint: (None, None)
    size: (800, 600) #為了更清楚呈現圖片，因此微調大小
    pos_hint: {'center_x': .5, 'y': .2}

    TabbedPanel:
        background_color: 1,0,1,.5 #決定背景顏色
        background_image: 'dog.jpg' #決定背景圖片

        TabbedPanelItem:
            text: 'A1'
            Label:
                text: 'B2'

        TabbedPanelItem:
            text: 'C3'
            BoxLayout:
                Label:
                    text: 'D4'
                Button:
                    text: 'E5'

        TabbedPanelItem:
            text: 'F6'
            TextInput:
                text: 'G7'

    Label:
        text: 'ABC'

執行結果如下:

2.調整滾動條的垂直長度

程式碼如下:

<MyLayout>:
    rows: 2

    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}

    TabbedPanel:
        bar_width: 300 #調整滾動條的長

        TabbedPanelItem:
            text: 'A1'
            Label:
                text: 'B2'

        TabbedPanelItem:
            text: 'C3'
            BoxLayout:
                Label:
                    text: 'D4'
                Button:
                    text: 'E5'

        TabbedPanelItem:
            text: 'F6'
            TextInput:
                text: 'G7'

    Label:
        text: 'ABC'

執行結果如下:

3.改變標籤的移動方式

scroll_type: ['content']代表移動方式以手指為準

scroll_type: ['bars']代表移動方式以滾動條為準

(這裡好難說明==|||，建議玩一下就知道了)

程式碼如下:

<MyLayout>:
    rows: 2

    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}

    TabbedPanel:
        bar_width: 300 #調整滾動條的垂直長度，否則預設的垂直長度太短，會不好點到bar
        scroll_type: ['bars']

        TabbedPanelItem:
            text: 'A1'
            Label:
                text: 'B2'

        TabbedPanelItem:
            text: 'C3'
            BoxLayout:
                Label:
                    text: 'D4'
                Button:
                    text: 'E5'

        TabbedPanelItem:
            text: 'F6'
            TextInput:
                text: 'G7'

    Label:
        text: 'ABC'

執行結果如下:

4.決定標籤欄位的背景圖案

程式碼如下:

<MyLayout>:
    rows: 2

    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}

    TabbedPanel:

        strip_image: 'dog.jpg' #背景圖案的路徑

        TabbedPanelItem:
            text: 'A1'
            Label:
                text: 'B2'

        TabbedPanelItem:
            text: 'C3'
            BoxLayout:
                Label:
                    text: 'D4'
                Button:
                    text: 'E5'

        TabbedPanelItem:
            text: 'F6'
            TextInput:
                text: 'G7'

    Label:
        text: 'ABC'

執行結果如下:

5.TabbedPanel預設會提供一個default_tab，如果不想要可以使用default_tab參數取消(建議取消啦，不然還要研究好麻煩~~)

程式碼如下:

<MyLayout>:
    rows: 2

    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}

    TabbedPanel:

        do_default_tab: False #do_default_tab設為False取消default tab

        TabbedPanelItem:
            text: 'A1'
            Label:
                text: 'B2'

        TabbedPanelItem:
            text: 'C3'
            BoxLayout:
                Label:
                    text: 'D4'
                Button:
                    text: 'E5'

        TabbedPanelItem:
            text: 'F6'
            TextInput:
                text: 'G7'

    Label:
        text: 'ABC'

執行結果如下:

6.決定標籤的水平、垂直長度以及相對位置

程式碼如下:

<MyLayout>:
    rows: 2
    size_hint: (None, None)
    size: (400, 300)
    pos_hint: {'center_x': .5, 'y': .2}

    TabbedPanel:
        tab_height: 100 #決定垂直長度
        tab_width: 200 #決定水平長度
        tab_pos: 'bottom_right'

        TabbedPanelItem:
            text: 'A1'
            
            Label:
                text: 'B2'

        TabbedPanelItem:
            text: 'C3'
            
            BoxLayout:
            
                Label:
                    text: 'D4'
                    
                Button:
                    text: 'E5'

        TabbedPanelItem:
            text: 'F6'
            
            TextInput:
                text: 'G7'

    Label:
        text: 'ABC'

(tab_pos決定相對位置，更多選項可參考https://kivy.org/doc/stable/api-kivy.uix.tabbedpanel.html#kivy.uix.tabbedpanel.TabbedPanel.tab_pos)

執行結果如下: