Flet框架类结构下实现页面路由跳转求助

下面是修改后的代码，实现点击登录按钮跳转到登录页面，同时保留原有Todo首页的结构：

import flet as ft

class TodoApp(ft.UserControl):
    def build(self):
        return ft.Column(
            controls=[
                ft.Row(
                    [
                        ft.ElevatedButton(
                            text="Login/SignUp",
                            tooltip="login", 
                            color='green', 
                            on_click=self.go_to_login
                        ),
                        ft.Text(
                            value="ToDo", 
                            style=ft.TextThemeStyle.HEADLINE_MEDIUM, 
                            color='green'
                        )
                    ],
                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                ),
            ],
        )
    
    def go_to_login(self, e):
        # 跳转到登录页面路由
        e.page.go("/login")

class LoginPage(ft.UserControl):
    def build(self):
        return ft.Column(
            controls=[
                ft.Text("登录页面", style=ft.TextThemeStyle.HEADLINE_MEDIUM),
                ft.ElevatedButton(
                    text="返回首页",
                    on_click=self.go_back_home
                )
            ],
            alignment=ft.MainAxisAlignment.CENTER,
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        )
    
    def go_back_home(self, e):
        # 返回首页路由
        e.page.go("/")

async def route_change_handler(page: ft.Page, route):
    # 清空当前页面所有控件
    page.controls.clear()
    # 根据当前路由加载对应页面
    if route == "/":
        await page.add_async(TodoApp())
    elif route == "/login":
        await page.add_async(LoginPage())
    # 更新页面
    await page.update_async()

async def main(page: ft.Page):
    page.title = "ToDo App"
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.scroll = ft.ScrollMode.ADAPTIVE
    
    # 设置路由变化的处理函数
    page.on_route_change = lambda e: route_change_handler(page, e.route)
    # 初始化加载首页
    await route_change_handler(page, page.route)

ft.app(main, view=ft.AppView.WEB_BROWSER)

关键修改说明： #

• 新增LoginPage类作为登录页面的控件结构，包含返回首页的按钮。
• 在TodoApp的按钮点击事件中，使用e.page.go("/login")触发路由跳转。
• 新增route_change_handler函数，负责根据当前路由切换页面内容：每次路由变化时清空页面控件，添加对应页面的UserControl，然后更新页面。
• 在main函数中注册路由变化的处理函数，并初始化加载首页。

这样修改后，点击"Login/SignUp"按钮就能跳转到登录页面，点击登录页面的"返回首页"按钮也能回到Todo首页。

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