跳到主要内容

侧边导航栏 NavigationRail

这是一个材料小部件，用于在应用程序的左侧或右侧显示，用于在少量视图之间导航，通常在三个到五个之间。

示例​

在线示例

import flet as ft

def main(page: ft.Page):

    rail = ft.NavigationRail(
        selected_index=0,
        label_type=ft.NavigationRailLabelType.ALL,
        # extended=True,
        min_width=100,
        min_extended_width=400,
        leading=ft.FloatingActionButton(icon=ft.icons.CREATE, text="Add"),
        group_alignment=-0.9,
        destinations=[
            ft.NavigationRailDestination(
                icon=ft.icons.FAVORITE_BORDER, selected_icon=ft.icons.FAVORITE, label="First"
            ),
            ft.NavigationRailDestination(
                icon_content=ft.Icon(ft.icons.BOOKMARK_BORDER),
                selected_icon_content=ft.Icon(ft.icons.BOOKMARK),
                label="Second",
            ),
            ft.NavigationRailDestination(
                icon=ft.icons.SETTINGS_OUTLINED,
                selected_icon_content=ft.Icon(ft.icons.SETTINGS),
                label_content=ft.Text("Settings"),
            ),
        ],
        on_change=lambda e: print("Selected destination:", e.control.selected_index),
    )

    page.add(
        ft.Row(
            [
                rail,
                ft.VerticalDivider(width=1),
                ft.Column([ ft.Text("Body!")], alignment=ft.MainAxisAlignment.START, expand=True),
            ],
            expand=True,
        )
    )

ft.app(target=main)

bgcolor​

设置包含所有NavigationRail内容的容器的颜色。

destinations​

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

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

extended​

指示NavigationRail是否应处于扩展状态。

扩展状态具有较宽的导航栏容器，并且标签位于图标旁边。可以使用min_extended_width设置导航栏在此状态下的最小宽度。

导航栏将在扩展状态和普通状态之间隐式动画。

如果导航栏将处于扩展状态，则label_type必须设置为none。

默认值为False。

elevation​

控制NavigationRail下方阴影的大小。默认值为0.0。

group_alignment​

导航栏内目标组的垂直对齐方式。

NavigationRailDestinations与尾部小部件一起分组，位于前导小部件和导航栏底部之间。

该值必须介于-1.0和1.0之间。

如果group_alignment为-1.0，则项目将对齐到顶部。如果group_alignment为0.0，则项目将对齐到中心。如果group_alignment为1.0，则项目将对齐到底部。

默认值为-1.0。

indicator_color​

导航栏指示器的颜色。

indicator_shape​

导航栏指示器的形状。

该值是以下实现之一的实例：

  • StadiumBorder
  • RoundedRectangleBorder
    • radius - 边框半径，BorderRadius类的实例或数字。
  • CircleBorder
  • BeveledRectangleBorder
    • radius - 边框半径，BorderRadius类的实例或数字。
  • ContinuousRectangleBorder
    • radius - 边框半径，BorderRadius类的实例或数字。

默认形状为StadiumBorder。

label_type​

定义默认未扩展的NavigationRail标签的布局和行为。

当导航栏扩展时，始终显示标签。

属性值是NavigationRailLabelType枚举，有以下值：NONE（默认值），ALL，SELECTED。

leading​

导航栏中的可选前导控件，放置在目标之上。

其位置不受group_alignment的影响。

通常为FloatingActionButton，但也可以是非按钮，如标志。

min_extended_width​

将extended设置为True时，动画完成时的最终宽度。

默认值为256。

min_width​

导航栏的最小可能宽度，无论目标的图标或标签尺寸如何。

默认值为72。

此值还定义了目标的最小宽度和最小高度。

要创建紧凑的导航栏，请将其设置为56，并使用label_type='none'。

selected_index​

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

trailing​

导航栏中的可选尾部控件，放置在目标之下。

其位置受group_alignment的影响。

通常是其他选项或目标的列表，通常仅在extended为True时渲染。

on_change​

当选定的目标发生更改时触发。

icon​

目标的图标名称。

icon_content​

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

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

为了使NavigationRail更具可访问性，请考虑选择具有描边和填充版本的图标，例如icons.CLOUD和icons.CLOUD_QUEUE。图标应设置为描边版本，selected_icon应设置为填充版本。

label​

label_content​

目标的标签控件。

必须提供标签与NavigationRail一起使用。当label_type='none'时，仍然使用标签进行语义化，并且如果extended为True，则仍然可以使用标签。

padding​

调整目标项的空间量。

有关填充和可能值的更多信息，请参见Container.padding。

selected_icon​

选中此目标时显示的备用图标名称。

selected_icon_content​

选中此目标时显示的备用图标控件。

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