跳到主要内容

抽屉导航栏 NavigationDrawer

Material Design 导航抽屉组件。

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

示例​

实时示例

导航抽屉从页面左侧滑入​

import flet as ft


def main(page: ft.Page):
    page.drawer = ft.NavigationDrawer(
        controls=[
            ft.Container(height=12),
            ft.NavigationDrawerDestination(
                label="项1",
                icon=ft.icons.DOOR_BACK_DOOR_OUTLINED,
                selected_icon_content=ft.Icon(ft.icons.DOOR_BACK_DOOR),
            ),
            ft.Divider(thickness=2),
            ft.NavigationDrawerDestination(
                icon_content=ft.Icon(ft.icons.MAIL_OUTLINED),
                label="项2",
                selected_icon=ft.icons.MAIL,
            ),
            ft.NavigationDrawerDestination(
                icon_content=ft.Icon(ft.icons.PHONE_OUTLINED),
                label="项3",
                selected_icon=ft.icons.PHONE,
            ),
        ],
    )

    def show_drawer(e):
        page.drawer.open = True
        page.drawer.update()

    page.add(ft.ElevatedButton("显示抽屉", on_click=show_drawer))


ft.app(main)

导航抽屉从页面右侧滑入​

import flet as ft


def main(page: ft.Page):
    def end_drawer_dismissed(e):
        print("抽屉已关闭！")

    end_drawer = ft.NavigationDrawer(
        on_dismiss=end_drawer_dismissed,
        controls=[
            ft.NavigationDrawerDestination(
                icon=ft.icons.ADD_TO_HOME_SCREEN_SHARP, label="项1"
            ),
            ft.NavigationDrawerDestination(icon=ft.icons.ADD_COMMENT, label="项2"),
        ],
    )

    def show_end_drawer(e):
        page.show_end_drawer(end_drawer)

    page.add(ft.ElevatedButton("显示末尾抽屉", on_click=show_end_drawer))


ft.app(main)

bgcolor​

导航抽屉本身的颜色。

controls​

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

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

elevation​

导航抽屉本身的高度。

indicator_color​

选定目标指示器的颜色。

indicator_shape​

选定目标指示器的形状。有关可能的值，请参见按钮样式示例。

selected_index​

当前选择的 NavigationDrawerDestination 的索引，如果没有选择的目标，则为 null。

有效的 selected_index 是 0 到目标数量 - 1 之间的整数。对于一个无效的 selected_index，例如 -1，所有的目标将显示为未选择状态。

shadow_color​

用于指示 elevation 的阴影的颜色。

surface_tint_color​

包含导航抽屉内容的材料的表面颜色。

tile_padding​

为 NavigationDrawerDestination 控件定义填充。

on_change​

选择的目标更改时触发。

on_dismiss​

在点击面板外部或通过编程方式关闭导航抽屉时触发。

icon​

目标的图标名称。

icon_content​

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

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

为了使导航抽屉更易于访问，请选择具有描边和填充版本的图标，例如 icons.CLOUD 和 icons.CLOUD_QUEUE。将图标设置为描边版本，将 selected_icon 设置为填充版本。

label​

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

open​

设置为 True 以显示导航抽屉。

selected_icon​

当选择了此目标时显示的替代图标名称。

selected_icon_content​

当选择了此目标时显示的替代图标 Control。

如果未提供此图标，则导航抽屉将在任何状态下显示 icon_content。