Skip to content

TabBarIndicatorSize 继承自: Enum

Defines how the bounds of the selected tab indicator are computed.

示例 ​

python
import flet as ft


def showcase_card(indicator_size: ft.TabBarIndicatorSize) -> ft.Container:
    tabs_count = 3

    tab_bar = ft.TabBar(
        indicator_size=indicator_size,
        indicator=ft.UnderlineTabIndicator(
            border_side=ft.BorderSide(width=4, color=ft.Colors.PRIMARY),
            insets=ft.Padding.only(bottom=3),
        ),
        tabs=[
            ft.Tab(label="A"),
            ft.Tab(label="Long Label"),
            ft.Tab(label="Mid"),
        ],
    )

    tab_view = ft.Container(
        height=70,
        alignment=ft.Alignment.CENTER,
        border=ft.Border.all(1, ft.Colors.OUTLINE),
        border_radius=8,
        bgcolor=ft.Colors.SURFACE,
        content=ft.TabBarView(
            controls=[
                ft.Container(
                    alignment=ft.Alignment.CENTER,
                    content=ft.Text(f"View {i + 1}"),
                )
                for i in range(tabs_count)
            ]
        ),
    )

    return ft.Container(
        width=380,
        padding=12,
        border=ft.Border.all(1, ft.Colors.RED),
        border_radius=10,
        bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
        content=ft.Column(
            spacing=8,
            controls=[
                ft.Text(indicator_size.name, weight=ft.FontWeight.BOLD),
                ft.Tabs(
                    length=tabs_count,
                    selected_index=1,
                    content=ft.Column(spacing=8, controls=[tab_bar, tab_view]),
                ),
            ],
        ),
    )


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="TabBarIndicatorSize Showcase")
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text(
                        "Compare indicator width when matching tab bounds vs "
                        "label bounds."
                    ),
                    ft.Row(
                        wrap=True,
                        spacing=12,
                        expand=True,
                        scroll=ft.ScrollMode.AUTO,
                        alignment=ft.MainAxisAlignment.CENTER,
                        controls=[
                            showcase_card(indicator_size)
                            for indicator_size in ft.TabBarIndicatorSize
                        ],
                    ),
                ],
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)

枚举值 ​

名称类型默认值说明
TAB—'tab'The tab indicator's bounds are as wide as the space occupied by the tab in the tab bar: from the right edge of the previous tab to the left edge of the next tab.
LABEL—'label'The tab's bounds are only as wide as the (centered) tab widget itself. This value is used to align the tab's label, typically a [Tab] widget's text or icon, with the selected tab indicator.

关注我,学习大模型、大数据、Python等热门技术。