Flet Python项目：点击PopupMenuItem修改PopupMenuButton图标颜色问题

问题解决 #

核心问题分析 #

1. 实例引用未更新：你修改self.dStatus只是重新赋值变量，但PopupMenuButton的content绑定的是最初创建的Icon实例，变量赋值不会自动同步UI组件的属性。
2. 大小写错误：PopupMenuItem里Busy按钮的data写成了"BUsy"，和判断条件里的"Busy"不匹配，导致点击Busy时不会触发颜色修改逻辑。

修正后的代码 #

self.dStatus = Icon(name=icons.CIRCLE_ROUNDED, color="White")

# 提前定义PopupMenuButton实例，方便后续直接修改属性
status_menu_button = PopupMenuButton(
    content=self.dStatus,
    items=[
        PopupMenuItem(text="Status"),
        PopupMenuItem(
            content=ElevatedButton(
                text="Online",
                icon=icons.CIRCLE_ROUNDED,
                icon_color="Green",
                data="Online",
                on_click=onButtonClick
            )
        ),
        PopupMenuItem(
            content=ElevatedButton(
                text="Busy",
                icon=icons.CIRCLE_ROUNDED,
                icon_color="Red",
                data="Busy",  # 修正大小写错误
                on_click=onButtonClick
            )
        )
    ]
)

def onButtonClick(e):
    if e.control.data == "Online":
        new_icon = Icon(name=icons.CIRCLE_ROUNDED, color="Green")
    elif e.control.data == "Busy":
        new_icon = Icon(name=icons.CIRCLE_ROUNDED, color="Red")
    else:
        new_icon = self.dStatus  # 保留默认白色
    
    # 直接更新PopupMenuButton的content属性，触发UI刷新
    status_menu_button.content = new_icon
    self.dStatus = new_icon  # 同步更新变量

avatar_container = Container(
    width=40,
    height=40,
    margin=margin.only(top=35, left=300),
    content=status_menu_button
)

关键改动说明 #

• 提前定义status_menu_button实例，这样在点击事件中可以直接访问并修改它的content属性，确保UI同步更新。
• 修正Busy按钮的data值大小写，保证判断逻辑能正确匹配。
• 直接修改status_menu_button.content是触发UI刷新的正确方式，而非替换整个容器的内容。

内容的提问来源于stack exchange，提问作者Jun Yong