跳到主要内容

MenuItemButton

用于菜单栏或独立使用的按钮，可以通过点击或键盘导航激活。

示例​

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} 背景颜色"
        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.MenuItemButton(
                        content=ft.Text("Blue"),
                        leading=ft.Icon(ft.icons.COLORIZE),
                        style=ft.ButtonStyle(bgcolor={ft.ControlState.HOVERED: ft.colors.BLUE}),
                        on_click=handle_color_click,
                        on_hover=handle_on_hover,
                    ),
                    ft.MenuItemButton(
                        content=ft.Text("Green"),
                        leading=ft.Icon(ft.icons.COLORIZE),
                        style=ft.ButtonStyle(bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN}),
                        on_click=handle_color_click,
                        on_hover=handle_on_hover,
                    ),
                    ft.MenuItemButton(
                        content=ft.Text("Red"),
                        leading=ft.Icon(ft.icons.COLORIZE),
                        style=ft.ButtonStyle(bgcolor={ft.ControlState.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("从菜单中选择背景颜色", style=ft.TextThemeStyle.HEADLINE_LARGE),
            alignment=ft.alignment.center,
        )
    )


ft.app(target=main)

属性​

clip_behavior​

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

默认为 NONE。

close_on_click​

定义当 MenuItemButton 被点击时是否关闭菜单。

默认为 True。

content​

在按钮中心显示的子控件。

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

focus_on_hover​

确定是否可以在悬停时请求焦点。

默认为 True。

leading​

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

style​

自定义按钮的外观。

值是一个 ButtonStyle 类的实例。

trailing​

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

事件​

on_blur​

当按钮失去焦点时触发。

on_click​

当按钮被点击时触发。

on_focus​

当按钮获得焦点时触发。

on_hover​

当按钮被悬停时触发。