路由切换时如何停止Flet控件更新并解决断言错误

问题根源 #

你遇到的AssertionError: 'Control must be added to the page first.'，本质是Welcome视图的布局更新循环在视图已从页面移除后，还在尝试操作其中的控件。虽然你在will_unmount()里修改了布尔变量，但这个变量的检查可能有延迟，加上will_unmount触发时视图已经被页面移除，后续循环里对控件的更新操作就会触发断言错误。

正确解决方案 #

使用Flet提供的CancelToken来管理异步更新任务，确保切换视图时能立刻终止更新循环，同时避免操作已脱离页面的控件。

实现步骤

1. 在Welcome视图类中定义一个CancelToken实例，用于控制更新任务的启停。
2. 在did_mount()中启动一个异步任务（用page.run_task），执行布局更新循环，循环内先检查令牌是否已取消，再执行更新操作。
3. 在will_unmount()中调用令牌的cancel()方法，立刻终止更新循环。

示例代码

import flet as ft
from flet_core import CancelToken

class WelcomeView(ft.View):
    def __init__(self, page: ft.Page):
        super().__init__(route="/", controls=[ft.Text("Welcome")])
        self.page = page
        self.update_token = CancelToken()

    async def update_layout(self):
        while not self.update_token.is_cancelled:
            # 这里是你的布局更新逻辑，比如更新控件属性
            self.controls[0].value = f"Welcome updated at {ft.datetime.now()}"
            # 先检查控件是否还在页面中，再调用update
            if self.controls[0].page is not None:
                await self.controls[0].update_async()
            await ft.asyncio.sleep(0.5)

    def did_mount(self):
        # 用page.run_task启动异步更新任务
        self.page.run_task(self.update_layout, token=self.update_token)

    def will_unmount(self):
        # 取消令牌，终止更新循环
        self.update_token.cancel()

class LoginView(ft.View):
    def __init__(self):
        super().__init__(route="/login", controls=[ft.Text("Login")])

def main(page: ft.Page):
    def route_change(e: ft.RouteChangeEvent):
        page.views.clear()
        if page.route == "/":
            page.views.append(WelcomeView(page))
        elif page.route == "/login":
            page.views.append(LoginView())
        page.update()

    page.on_route_change = route_change
    page.go("/")

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

关键细节说明 #

• CancelToken的优势：对比布尔变量，它能更可靠地终止异步任务，一旦调用cancel()，循环里的is_cancelled检查会立刻生效，不会出现延迟执行的情况。
• 控件存在性检查：在更新控件前先判断control.page is not None，即使令牌取消有极小延迟，也能避免操作已脱离页面的控件。
• page.run_task：Flet推荐用这个方法管理页面相关的异步任务，它会自动处理任务的生命周期，避免内存泄漏。

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