菜单栏 MenuBar
一个管理级联子菜单的菜单栏。
它可以放置在任何位置，但通常位于应用程序的主体上方，并定义了一个菜单系统，以响应用户选择菜单项时调用回调。
示例
- Python
import flet as ft
def main(page: ft.Page):
page.theme_mode = ft.ThemeMode.LIGHT
appbar_text_ref = ft.Ref[ft.Text]()
def handle_menu_item_click(e):
print(f"{e.control.content.value}.on_click")
page.show_snack_bar(ft.SnackBar(content=ft.Text(f"{e.control.content.value} was clicked!")))
appbar_text_ref.current.value = e.control.content.value
page.update()
def handle_on_open(e):
print(f"{e.control.content.value}.on_open")
def handle_on_close(e):
print(f"{e.control.content.value}.on_close")
def handle_on_hover(e):
print(f"{e.control.content.value}.on_hover")
page.appbar = ft.AppBar(
title=ft.Text("菜单", ref=appbar_text_ref),
center_title=True,
bgcolor=ft.colors.BLUE
)
menubar = ft.MenuBar(
expand=True,
style=ft.MenuStyle(
alignment=ft.alignment.top_left,
bgcolor=ft.colors.RED_100,
mouse_cursor={ft.MaterialState.HOVERED: ft.MouseCursor.WAIT,
ft.MaterialState.DEFAULT: ft.MouseCursor.ZOOM_OUT},
),
controls=[
ft.SubmenuButton(
content=ft.Text("文件"),
on_open=handle_on_open,
on_close=handle_on_close,
on_hover=handle_on_hover,
controls=[
ft.MenuItemButton(
content=ft.Text("关于"),
leading=ft.Icon(ft.icons.INFO),
style=ft.ButtonStyle(bgcolor={ft.MaterialState.HOVERED: ft.colors.GREEN_100}),
on_click=handle_menu_item_click
),
ft.MenuItemButton(
content=ft.Text("保存"),
leading=ft.Icon(ft.icons.SAVE),
style=ft.ButtonStyle(bgcolor={ft.MaterialState.HOVERED: ft.colors.GREEN_100}),
on_click=handle_menu_item_click
),
ft.MenuItemButton(
content=ft.Text("退出"),
leading=ft.Icon(ft.icons.CLOSE),
style=ft.ButtonStyle(bgcolor={ft.MaterialState.HOVERED: ft.colors.GREEN_100}),
on_click=handle_menu_item_click
)
]
),
ft.SubmenuButton(
content=ft.Text("视图"),
on_open=handle_on_open,
on_close=handle_on_close,
on_hover=handle_on_hover,
controls=[
ft.SubmenuButton(
content=ft.Text("缩放"),
controls=[
ft.MenuItemButton(
content=ft.Text("放大"),
leading=ft.Icon(ft.icons.ZOOM_IN),
close_on_click=False,
style=ft.ButtonStyle(bgcolor={ft.MaterialState.HOVERED: ft.colors.PURPLE_200}),
on_click=handle_menu_item_click
),
ft.MenuItemButton(
content=ft.Text("缩小"),
leading=ft.Icon(ft.icons.ZOOM_OUT),
close_on_click=False,
style=ft.ButtonStyle(bgcolor={ft.MaterialState.HOVERED: ft.colors.PURPLE_200}),
on_click=handle_menu_item_click
)
]
)
]
),
]
)
page.add(
ft.Row([menubar]),
)
ft.app(target=main)
属性
clip_behavior
是否裁剪此控件的内容。有关可能的值，请参见Container.clip_behavior。
默认为 ClipBehavior.NONE。
controls
MenuBar的顶级子菜单项列表。
style
该值是MenuStyle类的实例。MenuStyle允许控制菜单的视觉方面，如形状、背景和阴影颜色、内容填充、边框宽度和半径。
每个单独的样式属性都可以为菜单的所有或特定的“材质状态”配置，例如“hovered”、“focused”、“disabled”等。例如，您可以为悬停状态配置不同的形状、背景颜色，并为所有其他状态配置回退值。
支持以下MaterialState值：
HOVEREDFOCUSEDPRESSEDDRAGGEDSELECTEDSCROLLEDUNDERDISABLEDERRORDEFAULT- 回退状态，表示“所有其他状态”。
要为所有材质状态配置样式属性，请将其值设置为文字（或类实例）。例如，如果将bgcolor属性设置为文字，则该值将应用于所有菜单状态：
ft.MenuStyle(
bgcolor=ft.colors.RED
)
要为特定的材质状态配置样式属性，请将其值设置为字典，其中键是状态名称。例如，为HOVERED和FOCUSED状态配置不同的背景颜色，为所有其他状态配置其他颜色：
ft.MenuStyle(
bgcolor={
ft.MaterialState.HOVERED: ft.colors.WHITE,
ft.MaterialState.FOCUSED: ft.colors.BLUE,
ft.MaterialState.DEFAULT: ft.colors.BLACK,
}
)
MenuStyle类
MenuStyle类具有以下属性：
alignment- 定义打开子菜单时相对于打开它的按钮的所需对齐方式。bgcolor- 菜单的背景填充颜色。elevation- 菜单的材质的高度。padding- 菜单边界与其子元素之间的间距。shadow_color- 菜单材质的阴影颜色。shape- 菜单底层材质的形状，是以下实现之一的实例：StadiumBorderRoundedRectangleBorderradius- 边界半径，一个BorderRadius类的实例或一个数字。
CircleBorderBeveledRectangleBorderradius- 边界半径，一个BorderRadius类的实例或一个数字。
ContinuousRectangleBorderradius- 边界半径，一个BorderRadius类的实例或一个数字。
side-BorderSide类的实例，菜单轮廓的颜色和权重。surface_tint_color- 菜单材质的表面着色颜色。