跳到主要内容

导航抽屉

Material Design 导航抽屉组件。

导航抽屉是一个水平从页面左或右边缘滑入的面板，用于显示应用程序的主要目的地。要将导航抽屉添加到页面，请使用 page.drawer 和 page.end_drawer 属性。类似地，导航抽屉也可以添加到 View 中。要显示抽屉，请将其 open 属性设置为 True。

要打开此控件，只需调用page.open()辅助方法。

示例​

Live 示例

从页面左边缘滑入的导航抽屉​

import flet as ft


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

    def handle_dismissal(e):
        page.add(ft.Text("Drawer dismissed"))

    def handle_change(e):
        page.add(ft.Text(f"Selected Index changed: {e.control.selected_index}"))
        # page.close(drawer)

    drawer = ft.NavigationDrawer(
        on_dismiss=handle_dismissal,
        on_change=handle_change,
        controls=[
            ft.Container(height=12),
            ft.NavigationDrawerDestination(
                label="Item 1",
                icon=ft.icons.DOOR_BACK_DOOR_OUTLINED,
                selected_icon=ft.Icon(ft.icons.DOOR_BACK_DOOR),
            ),
            ft.Divider(thickness=2),
            ft.NavigationDrawerDestination(
                icon=ft.Icon(ft.icons.MAIL_OUTLINED),
                label="Item 2",
                selected_icon=ft.icons.MAIL,
            ),
            ft.NavigationDrawerDestination(
                icon=ft.Icon(ft.icons.PHONE_OUTLINED),
                label="Item 3",
                selected_icon=ft.icons.PHONE,
            ),
        ],
    )

    page.add(ft.ElevatedButton("Show drawer", on_click=lambda e: page.open(drawer)))


ft.app(main)

从页面右边缘滑入的导航抽屉​

import flet as ft


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

    def handle_dismissal(e):
        page.add(ft.Text("End drawer dismissed"))

    def handle_change(e):
        page.add(ft.Text(f"Selected Index changed: {e.control.selected_index}"))
        # page.close(end_drawer)

    end_drawer = ft.NavigationDrawer(
        position=ft.NavigationDrawerPosition.END,
        on_dismiss=handle_dismissal,
        on_change=handle_change,
        controls=[
            ft.NavigationDrawerDestination(icon=ft.Icons.ADD_TO_HOME_SCREEN_SHARP, label="Item 1"),
            ft.NavigationDrawerDestination(icon=ft.Icons.ADD_COMMENT, label="Item 2"),
        ],
    )

    page.add(ft.ElevatedButton("Show end drawer", on_click=lambda e: page.open(end_drawer)))


ft.app(main)

bgcolor​

导航抽屉的背景颜色。

controls​

定义导航抽屉中的项目外观。

列表包含 NavigationDrawerDestination 项和/或其他控件，如标题和分隔符。

elevation​

导航抽屉的高度。

indicator_color​

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

indicator_shape​

所选目标指示器的形状。

值的类型为 OutlinedBorder 。

position​

此抽屉的位置。

值的类型为 NavigationDrawerPosition ，默认值为 NavigationDrawerPosition.START 。

selected_index​

当前选定的 NavigationDrawerDestination 的索引，或者如果没有目的地被选定，则为 null。

有效的 selected_index 是一个介于 0 和目的地数量 - 1 之间的整数。对于无效的 selected_index，例如 -1，所有目的地将显示未选定。

shadow_color​

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

surface_tint_color​

Material 的 surface tint，用于保存导航抽屉的内容。

tile_padding​

定义 NavigationDrawerDestination 控件的填充。

on_change​

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

on_dismiss​

当导航抽屉被dismiss（例如，点击外部或programmatically）时触发。

bgcolor​

该目的地的背景颜色。

icon​

目标的图标名称或“Control”。

带有图标名称的示例：

icon=ft.icons.BOOKMARK

带有“Control”的示例：

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

如果提供了“selected_icon”，则仅在目标未被选中时显示此内容。

icon_content​

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

在 v0.25.0 中已弃用，并将在 v0.28.0 中删除。请改用icon。

label​

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

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.28.0 中删除。请改用selected_icon。