跳到主要内容

子菜单按钮

显示级联菜单的菜单按钮。

它可以作为 MenuBar 的一部分使用，也可以作为独立控件使用。

示例​

Live 示例

基本示例​

import flet as ft


def main(page: ft.Page):
    page.padding = 0
    page.spacing = 0

    bg_container = ft.Ref[ft.Container]()

    def handle_color_click(e):
        color = e.control.content.value
        print(f"{color}.on_click")
        bg_container.current.content.value = f"{color} background color"
        bg_container.current.bgcolor = color.lower()
        page.update()

    def handle_on_hover(e):
        print(f"{e.control.content.value}.on_hover")

    menubar = ft.MenuBar(
        expand=True,
        controls=[
            ft.SubmenuButton(
                content=ft.Text("BgColors"),
                controls=[
                    ft.SubmenuButton(
                        content=ft.Text("B"),
                        leading=ft.Icon(ft.icons.COLORIZE),
                        controls=[
                            ft.MenuItemButton(
                                content=ft.Text("Blue"),
                                style=ft.ButtonStyle(bgcolor={ft.MaterialState.HOVERED: ft.colors.BLUE}),
                                on_click=handle_color_click,
                                on_hover=handle_on_hover,
                            )
                        ]
                    ),
                    ft.SubmenuButton(
                        content=ft.Text("G"),
                        leading=ft.Icon(ft.icons.COLORIZE),
                        controls=[
                            ft.MenuItemButton(
                                content=ft.Text("Green"),
                                style=ft.ButtonStyle(bgcolor={ft.MaterialState.HOVERED: ft.colors.GREEN}),
                                on_click=handle_color_click,
                                on_hover=handle_on_hover,
                            )
                        ]
                    ),
                    ft.SubmenuButton(
                        content=ft.Text("R"),
                        leading=ft.Icon(ft.icons.COLORIZE),
                        controls=[
                            ft.MenuItemButton(
                                content=ft.Text("Red"),
                                style=ft.ButtonStyle(bgcolor={ft.MaterialState.HOVERED: ft.colors.RED}),
                                on_click=handle_color_click,
                                on_hover=handle_on_hover,
                            )
                        ]
                    )
                ]
            )
        ]
    )

    page.add(
        ft.Row([menubar]),
        ft.Container(
            ref=bg_container,
            expand=True,
            bgcolor=ft.colors.SURFACE,
            content=ft.Text("Choose a bgcolor from the menu", style=ft.TextThemeStyle.HEADLINE_LARGE),
            alignment=ft.alignment.center,
        )
    )


ft.app(target=main)

属性​

alignment_offset​

菜单相对于对齐原点的偏移量，该原点由 MenuStyle.alignment 在 style 属性中确定。

clip_behavior​

是否剪辑此控件的内容。属性值为 ClipBehavior 枚举。

默认为 HARD_EDGE。

content​

在按钮中间部分显示的子控件。

通常是按钮的标签，使用 Text 控件。

controls​

菜单打开时出现的控件列表。

通常是 MenuItemButton 或 SubMenuButton 控件。

如果此列表为空，则菜单项按钮将被禁用。

leading​

在 content 之前显示的可选控件。通常是 Icon 控件。

自定义菜单的外观。

值是 MenuStyle 类的实例。

style​

自定义按钮的外观。

值是 ButtonStyle 类的实例。

trailing​

在 content 之后显示的可选控件。通常是 Icon 控件。

事件​

on_blur​

按钮失去焦点时触发。

on_close​

菜单关闭时触发。

on_focus​

按钮获得焦点时触发。

on_hover​

按钮被悬停时触发。

on_open​

菜单打开时触发。