Flet – Tab 分頁 – George的生活點滴

Tab 能在一個頁面下建立不同的分頁，讓使用者在瀏覽時，能輕鬆的切換

我們直接拿官網的範例做了一下修改來說明並且看一下效果:


# Flet - Tab 
# 2024-08-30
# https://github.com/lcc728/flet/blob/main/ex_tab.py
import flet as ft

def main(page: ft.Page):

    t = ft.Tabs(
        selected_index=1,
        animation_duration=500,
        divider_color= "red",
        divider_height=2,      
        mouse_cursor="TEXT",       
        overlay_color = "yellow",
        unselected_label_color = "amber",
        indicator_border_side=ft.BorderSide(width=10, color=ft.colors.BLUE),  # indicator_color="green",
        indicator_border_radius=10,
        indicator_padding=3,
        tabs=[
            ft.Tab(
                text="Tab 1",
                content=ft.Container(
                    content=ft.Text("This is Tab 1"), alignment=ft.alignment.center
                ),
            ),
            ft.Tab(
                tab_content=ft.Icon(ft.icons.SEARCH),
                content=ft.Text("This is Tab 2"),
            ),
            ft.Tab(
                text="Tab 3",
                icon=ft.icons.SETTINGS,
                content=ft.Text("This is Tab 3"),
            ),
        ],
        expand=1,
    )
    page.add(t)

ft.app(target=main)

程式先用 ft.tabs 建立一個分頁的元件，裡面會有些常用的屬性:

selected_index : 畫面載入時的停留的分頁，預設值為0 (第一個分頁)，此例設為 1 ，開啟 APP 時會停留在第二個分頁
animation_duration :分頁切換時的動畫停留時間，單位為微秒 (ms)
divider_color: 分頁下方分隔線的顏色
divider_height: 分隔線的高度
mouse_cursor: 當滑鼠停留在分頁的游標的樣式，樣式請自行參考: https://flet.dev/docs/reference/types/mousecursor
overlay_color: 當滑鼠停留在分頁時，分頁的顏色
unselected_label_color: 分頁在沒有 focus 時的顏色
indicator_border_side: 當 focus 在分頁時，下方會有一條線，那條線的顏色與樣式，依此列來看線條高度是 10, 顏色為藍色，此設定會和 indicator_color 重疊，兩者以indicator_border_side優先
indicator_border_radius: 下方線的圓角半徑
indicator_padding 下方線和分隔線的間距

上面的設定幾乎都是選項，屬性能不設定。重點在 tabs 的設定, tabs 為一個 list, 每個 list 都是 ft.tab元件


            ft.Tab(
                text="Tab 1",

                content=ft.Container(
                    content=ft.Text("This is Tab 1"), alignment=ft.alignment.center
                ),
            ),

text : 分頁的名稱以文字方式呈現
icon: 分頁上左邊的 icon (tab3)
tab_content : 分頁上方為一元件，可以放置大部份的元件，像是文字， icon 等，(tab2 )
content:分頁的內容

Tab 的應用 : https://www.george.tw/2024/08/28/flet-collection-01/

執行結果：