跳到主要内容

NavigationBar 导航栏

Material 3 导航栏组件。

导航栏提供了一种持久且方便的方式来在应用程序中切换主要目的地。

示例​

实时示例

简单的导航栏​

import flet as ft

def main(page: ft.Page):

    page.title = "导航栏示例"
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(icon=ft.Icons.EXPLORE, label="Explore"),
            ft.NavigationBarDestination(icon=ft.Icons.COMMUTE, label="Commute"),
            ft.NavigationBarDestination(
                icon=ft.Icons.BOOKMARK_BORDER,
                selected_icon=ft.Icons.BOOKMARK,
                label="探索",
            ),
        ]
    )
    page.add(ft.Text("正文！"))

ft.app(target=main)

adaptive（自适应）​

如果值为True，则根据目标平台是否为 iOS/macOS 创建自适应的NavigationBar。

在 iOS 和 macOS 上，会创建一个CupertinoNavigationBar，它具有与NavigationBar相匹配的功能和外观，并且图形与 iOS 上的预期一致。在其他平台上，会创建一个 Material（材料设计）风格的NavigationBar。

默认为False。

animation_duration（动画持续时间）​

每个目的地在选中和未选中状态之间转换的过渡时间。

bgcolor（背景颜色）​

导航栏本身的颜色。

destinations（目的地）​

定义排列在导航栏内的按钮项的外观。

值必须是两个或更多NavigationBarDestination实例的列表。

elevation（高度）​

导航栏本身的高度。

indicator_color（指示器颜色）​

选中目的地指示器的颜色。

indicator_shape（指示器形状）​

选中目的地指示器的形状。

值的类型为 OutlinedBorder。

label_behavior（标签行为）​

定义目的地标签的布局方式以及何时显示。

可用于显示所有标签、仅显示选中标签或隐藏所有标签。

值的类型为 NavigationBarLabelBehavior，默认为NavigationBarLabelBehavior.ALWAYS_SHOW。

overlay_color（覆盖颜色）​

在各种 ControlState 状态下NavigationDestination的突出显示颜色。

支持以下 ControlState 值：PRESSED（按下）、HOVERED（悬停）和FOCUSED（聚焦）。

selected_index（选中索引）​

当前选中的NavigationBarDestination在destinations中的索引，如果没有选中任何目的地，则为None。

shadow_color（阴影颜色）​

用于表示高度的投影的颜色。

surface_tint_color（表面色调颜色）​

包含导航抽屉内容的 Material（材料设计）的表面色调。

on_change（更改时触发）​

当选中的目的地改变时触发。

bgcolor（背景颜色）​

此目的地的颜色。

icon（图标）​

目的地的图标名称或Control。

使用图标名称的示例：

icon=ft.icons.BOOKMARK

使用Control的示例：

icon=ft.Icon(ft.icons.BOOKMARK)

如果提供了selected_icon，则仅在目的地未被选中时显示此图标。

为了使导航栏更易于访问，可以考虑选择具有描边和填充版本的图标，例如ft.icons.CLOUD和ft.icons.CLOUD_QUEUE。图标应设置为描边版本，selected_icon应设置为填充版本。

icon_content​

目的地的图标Control。通常，图标是一个 Icon 控件。用于替代icon属性。

在 v0.25.0 中已弃用，并将在 v0.26.0 中删除。请使用 icon 代替。

label（标签）​

出现在此NavigationBarDestination图标下方的文本标签。

selected_icon（选中图标）​

当此目的地被选中时显示的替代图标或Control的名称。

使用图标名称的示例：

selected_icon=ft.icons.BOOKMARK

使用Control的示例：

selected_icon=ft.Icon(ft.icons.BOOKMARK)

如果未提供此图标，则导航栏在任何状态下都将显示icon。

selected_icon_content​

当此目的地被选中时显示的替代图标Control。

在 v0.25.0 中已弃用，并将在 v0.26.0 中删除。请使用 selected_icon 代替。