如何在Flet中右键点击ListTile或Text控件时显示自定义上下文菜单

Flet目前没有专门的右键菜单API，但可以通过GestureDetector监听次级点击（右键） + PopupMenu自定义菜单的组合，实现右键点击控件时显示自定义选项的需求，完全不需要依赖ListTile的尾部按钮方案。

完整代码示例 #

import flet as ft

def main(page: ft.Page):
    page.title = "右键自定义菜单示例"

    # 菜单选项点击回调
    def on_menu_option_selected(e):
        page.snack_bar = ft.SnackBar(ft.Text(f"选中选项：{e.control.text}"))
        page.snack_bar.open = True
        page.update()

    # 创建自定义上下文菜单
    def build_context_menu():
        return ft.PopupMenu(
            items=[
                ft.PopupMenuItem(text="复制内容", on_click=on_menu_option_selected),
                ft.PopupMenuItem(text="标记已读", on_click=on_menu_option_selected),
                ft.PopupMenuItem(text="删除", on_click=on_menu_option_selected, text_color=ft.colors.RED),
            ],
        )

    # 右键点击触发菜单显示
    def handle_right_click(e):
        # 清理已存在的菜单，避免重复显示
        for ctrl in page.controls:
            if isinstance(ctrl, ft.PopupMenu):
                page.remove(ctrl)
        # 创建菜单并定位到点击位置
        menu = build_context_menu()
        page.add(menu)
        menu.left = e.global_x
        menu.top = e.global_y
        menu.open = True
        page.update()

    # 给Text控件添加右键菜单
    text_control = ft.GestureDetector(
        content=ft.Text("右键点击我", size=20),
        on_secondary_tap=handle_right_click,
        on_secondary_tap_down=lambda e: None,  # 阻止系统默认右键菜单
    )

    # 给ListTile控件添加右键菜单
    list_tile_control = ft.GestureDetector(
        content=ft.ListTile(
            title=ft.Text("列表项"),
            subtitle=ft.Text("右键点击此列表项"),
        ),
        on_secondary_tap=handle_right_click,
        on_secondary_tap_down=lambda e: None,
    )

    page.add(text_control, list_tile_control)

if __name__ == "__main__":
    ft.app(target=main)

关键说明 #

• 监听右键点击：GestureDetector的on_secondary_tap事件对应桌面端的右键点击，触摸设备则响应次级点击（如长按）。
• 阻止系统默认菜单：设置on_secondary_tap_down为空回调，可避免系统原生右键菜单弹出，确保只显示自定义菜单。
• 菜单定位：通过事件参数e.global_x和e.global_y获取点击的全局坐标，将PopupMenu定位到点击位置，模拟原生上下文菜单的交互体验。
• 菜单清理：每次显示新菜单前移除已存在的PopupMenu，防止界面出现多个菜单实例。

内容的提问来源于stack exchange，提问作者Vignesh Sekar