跳到主要内容

菜单中按钮 SubmenuButton

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

它可以作为MenuBar（菜单栏）的一部分使用，也可以作为一个独立的控件使用。

示例​

Live example（在线示例）

基本示例​

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​

菜单与style属性的MenuStyle.alignment对齐原点之间的偏移量。

clip_behavior​

控制是否要裁剪此控件的内容。有关可能的值，请参阅Container.clip_behavior。

默认为ClipBehavior.HARD_EDGE。

content​

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

通常使用Text控件作为按钮的标签。

controls​

当菜单被打开时，在其中出现的一组控件。 通常是MenuItemButton或SubMenuButton控件。

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

leading​

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

自定义该菜单的外观。

有关此属性的更多信息，请参阅MenuStyle。

style​

自定义该按钮的外观。

有关此属性的更多信息，请参阅ElevatedButton.style。

trailing​

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

事件​

on_blur​

当按钮失去焦点时触发。

on_close​

当菜单关闭时触发。

on_focus​

当按钮获取焦点时触发。

on_hover​

当按钮被悬停时触发。

on_open​

当菜单打开时触发。