跳到主要内容

导航 Rail

Material 小部件，旨在显示在应用程序的左侧或右侧，以在少数视图之间导航，通常在三个和五个之间。

示例​

Live 示例

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​

定义按钮项的外观，这些按钮项 arrayed 在导航 rail 中。

值必须是一个或多个 NavigationRailDestination 实例的列表。

elevation​

控制 NavigationRail 底部阴影的大小。默认值为 0.0。

extended​

指示 NavigationRail 应该处于扩展状态。

扩展状态具有更宽的 rail 容器，并且标签位于图标旁边。min_extended_width 可以用于设置 rail 的最小宽度，当它处于该状态时。

rail 将隐式地在扩展和正常状态之间动画。

如果 rail 将处于扩展状态，那么 label_type 必须设置为 none。

默认值为 False。

group_alignment​

组的垂直对齐方式，在 rail 中的 destinations。

NavigationRailDestinations 与 trailing 小部件一起分组，在 leading 小部件和 rail 底部之间。

值必须在 -1.0 和 1.0 之间。

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

默认值为 -1.0。

indicator_color​

NavigationRail 指示器的颜色。

indicator_shape​

NavigationRail 指示器的形状。该值是 OutlinedBorder 类的实例。

默认形状是一个 StadiumBorder。

label_type​

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

当 NavigationRail 扩展时，标签总是显示。

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

leading​

rail 中的可选 leading 控件，位于 destinations 之上。

其位置不受 group_alignment 的影响。

这通常是一个 FloatingActionButton，但也可以是一个非按钮，例如一个 logo。

min_extended_width​

当 extended 设置为 True 时，animation 完成后的最终宽度。

默认值为 256。

min_width​

rail 的最小可能宽度，无论 destination 的图标或标签大小如何。

默认值为 72。

该值也定义了 destinations 的最小宽度和高度。

要创建一个紧凑的 rail，请将其设置为 56 并使用 label_type='none'。

selected_index​

当前选定的 NavigationRailDestination 的索引，或者如果没有 destination 选定则为 None。

selected_label_text_style​

选定 destination 的标签的文本样式。

当 destination 未选定时，将使用 unselected_label_text_style。

trailing​

rail 中的可选 trailing 控件，位于 destinations 之下。

其位置受到 group_alignment 的影响。

这通常是一个列表，包含额外的选项或 destinations，通常只有在 extended 为 True 时才渲染。

unselected_label_text_style​

未选定 destination 的标签的文本样式。

当 destination 选定时，将使用 selected_label_text_style。

on_change​

当选定 destination 改变时触发。

icon​

destination 的图标名称。

icon_content​

destination 的图标控件。通常是一个 Icon 控件。用于替代 icon 属性。

如果 selected_icon_content 提供了，这将只在 destination 未选定时显示。

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

indicator_color​

选定 destination 时指示器的颜色。

indicator_shape​

选定 destination 时指示器的形状。该值是 OutlinedBorder 类的实例。

label​

destination 的标签字符串。只有在 label_content 未提供时才会显示。

label_content​

destination 的标签控件。如果提供了这个，那么 label 将被忽略。

标签必须在使用 NavigationRail 时提供。当 NavigationRail.label_type=NavigationRailLabelType.NONE 时，标签仍然用于语义，并且可能仍然在 NavigationRail.extended=True 时使用。

padding​

destination 项的内边距。

内边距是一个 padding.Padding 类的实例。

selected_icon​

选定 destination 时显示的备用图标名称。

selected_icon_content​

选定 destination 时显示的备用图标控件。

如果未提供备用图标，那么 NavigationRail 将在两种状态下显示 icon_content。