如何点击一次禁用Flet中的按钮？当前需两次点击才生效

我希望点击一次就禁用Flet中的ElevatedButton，但编写的代码需要点击两次才能完成按钮禁用，附上代码后仍无法理解问题原因，请求解决。

原代码：

import flet as ft
from flet import ElevatedButton, ButtonStyle, RoundedRectangleBorder

def main(page: ft.page):
    page.title = "Test"
    page.window_width = 400.00
    page.window_height = 500.00

    def change_color(color):
        page.add(ft.Row([ft.Text('Go')], alignment=ft.MainAxisAlignment.CENTER))

        btn_green.disabled = True

    btn_green = ElevatedButton(text='Click me', bgcolor=ft.colors.GREEN, color='white',
                       width=110,
                       height=30,
                       style=ButtonStyle(shape=RoundedRectangleBorder(radius=10)),
                       on_click=change_color)


    page.add(ft.Row([
        btn_green
    ], alignment=ft.MainAxisAlignment.CENTER))

ft.app(target=main)

问题原因 #

Flet是基于状态同步的UI框架，修改组件属性（比如disabled）后，必须显式通知页面更新UI状态。原代码仅设置了btn_green.disabled = True，但未触发页面更新，导致第一次点击后组件状态已改变，但界面未同步刷新；第二次点击时页面才会同步之前的状态，因此看起来需要两次点击才生效。

修复方案 #

在设置按钮禁用状态后，调用btn_green.update()（或page.update()）触发UI更新，单独更新组件比更新整个页面更高效。

修复后的代码：

import flet as ft
from flet import ElevatedButton, ButtonStyle, RoundedRectangleBorder

def main(page: ft.page):
    page.title = "Test"
    page.window_width = 400.00
    page.window_height = 500.00

    def change_color(color):
        page.add(ft.Row([ft.Text('Go')], alignment=ft.MainAxisAlignment.CENTER))

        btn_green.disabled = True
        # 同步按钮状态到UI
        btn_green.update()

    btn_green = ElevatedButton(text='Click me', bgcolor=ft.colors.GREEN, color='white',
                       width=110,
                       height=30,
                       style=ButtonStyle(shape=RoundedRectangleBorder(radius=10)),
                       on_click=change_color)


    page.add(ft.Row([
        btn_green
    ], alignment=ft.MainAxisAlignment.CENTER))

ft.app(target=main)

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