跳到主要内容

MenuItemButton

一个用于在 MenuBar 中使用或单独使用的按钮，可以通过点击或键盘导航来激活。

示例​

实时示例

基本示例​

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


ft.app(target=main)

属性​

clip_behavior​

确定是否裁剪此控件的内容。有关可能的值，请参见 Container.clip_behavior。

默认值为 ClipBehavior.NONE。

close_on_click​

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

默认值为 True。

content​

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

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

focus_on_hover​

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

默认值为 True。

leading​

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

style​

自定义此按钮的外观。

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

trailing​

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

事件​

on_blur​

当按钮失去焦点时触发。

on_click​

当按钮被点击时触发。

on_focus​

当按钮获得焦点时触发。

on_hover​

当按钮被悬停时触发。