跳到主要内容

导航栏 NavigationBar

Material 3导航栏组件。

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

示例​

Live 示例

一个简单的NavigationBar​

import flet as ft

def main(page: ft.Page):

    page.title = "NavigationBar 示例"
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(icon=ft.icons.EXPLORE, label="探索"),
            ft.NavigationDestination(icon=ft.icons.COMMUTE, label="通勤"),
            ft.NavigationDestination(
                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。

bgcolor​

导航栏本身的颜色。

destinations​

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

该值必须是两个或两个以上 NavigationDestination 实例组成的列表。

elevation​

导航栏本身的高度。

indicator_color​

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

indicator_shape​

所选目的地指示器的形状。可能的值请参见 按钮样式示例。

label_behavior​

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

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

属性值是 NavigationBarLabelBehavior 枚举，具有以下值：

  • ALWAYS_SHOW（默认）- 始终在每个导航栏目标下显示所有标签，选定和未选定。
  • ALWAYS_HIDE - 无论选定与未选定，都不显示导航栏目标下的任何标签。
  • ONLY_SHOW_SELECTED - 仅显示所选导航栏目标的标签。当一个目标未选定时，标签会变淡，并且图标将居中显示。当一个目标被选中时，标签将淡入，标签和图标将向上滑动，使它们都居中对齐。

selected_index​

当前选定的 NavigationDestination 在 destinations 中的索引，如果没有选定的目标，则为 None。

shadow_color​

用于表示 elevation 的投影的颜色。

surface_tint_color​

包含 NavigationDrawer 内容的材料的表面色。

on_change​

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

icon​

目的地的图标名称。

icon_content​

目的地的图标 Control。通常图标是一个 Icon 控件。与 icon 属性一起使用。

如果提供了 selected_icon_content，则仅在目标未被选定时显示。

为了使 NavigationBar 更易于访问，可以选择带有描边和填充版本的图标，例如 icons.CLOUD 和 icons.CLOUD_QUEUE。图标应设置为描边版本，而 selected_icon 则为填充版本。

label​

显示在此 NavigationDestination 图标下方的文本标签。

selected_icon​

当选择该目的地时显示的备用图标的名称。

selected_icon_content​

选择该目的地时显示的备用图标 Control。

如果未提供此图标，则 NavigationBar 将在任一状态下显示 icon_content。