Flet路由问题：如何从购买iPhone页返回至商店页而非主页？

问题根源分析 #

1. 返回路径错误：原代码中route_change函数每次触发时都会先清空视图栈，再重新添加主页视图。进入「购买iPhone」页面时，视图栈仅包含「主页」和「购买iPhone」，因此点击系统返回时会直接回到主页，而非预期的「商店」页面。
2. 自定义返回按钮过渡异常：直接使用page.go('/store')属于正向路由跳转，而非返回操作，因此不会触发反向过渡动画，导致效果生硬且方向错误。

修复步骤 #

1. 修正视图栈构建逻辑 #

修改route_change函数，确保路由层级对应的视图完整存入栈中，让返回操作能找到正确的上一级页面：

def route_change(route):
    page.views.clear()
    # 主页始终作为栈底视图
    page.views.append(
        ft.View(
            "/",
            [
                ft.AppBar(title=ft.Text("Home"), bgcolor=ft.colors.SURFACE_VARIANT),
                ft.ElevatedButton("Store", on_click=lambda _: page.go("/store")),
            ],
        )
    )
    # 若路由为商店或更深层级，添加商店视图
    if page.route == "/store" or page.route == "/iPhone 15 Pro Max":
        page.views.append(
            ft.View(
                "/store",
                [
                    ft.AppBar(title=ft.Text("Store"), bgcolor=ft.colors.SURFACE_VARIANT),
                    ft.ElevatedButton('Buy iPhone 15 Pro Max', on_click=lambda _: page.go('/iPhone 15 Pro Max')),
                ],
            )
        )
    # 若路由为购买iPhone页面，添加对应视图
    if page.route == "/iPhone 15 Pro Max":
        page.views.append(
            ft.View(
                "/iPhone 15 Pro Max",
                controls=[
                    ft.AppBar(title=ft.Text("Buy iPhone"), bgcolor=ft.colors.SURFACE_VARIANT),
                    ft.Text('Test')
                ]
            )
        )
    page.update()

2. 修复自定义返回按钮的过渡效果 #

将返回按钮的点击事件改为调用page.go_back()，触发系统原生返回逻辑，获得正确的反向过渡动画：

elif page.route == "/iPhone 15 Pro Max":
    page.views.append(
        ft.View(
            "/iPhone 15 Pro Max",
            controls=[
                ft.AppBar(
                    title=ft.Text("Buy iPhone"), 
                    bgcolor=ft.colors.SURFACE_VARIANT,
                    leading=ft.IconButton(
                        icon=ft.icons.ARROW_BACK_IOS,
                        on_click=lambda e: e.page.go_back(),
                        color='black'
                    ),
                ),
                ft.Text('Test')
            ]
        )
    )

完整修复代码 #

import flet as ft

def main(page: ft.Page):
    page.title = "Routes Example"
    page.window_width = 400
    page.window_height = 600

    def route_change(route):
        page.views.clear()
        # 主页视图
        page.views.append(
            ft.View(
                "/",
                [
                    ft.AppBar(title=ft.Text("Home"), bgcolor=ft.colors.SURFACE_VARIANT),
                    ft.ElevatedButton("Store", on_click=lambda _: page.go("/store")),
                ],
            )
        )
        # 商店视图（路由为/store或更深层级时添加）
        if page.route == "/store" or page.route == "/iPhone 15 Pro Max":
            page.views.append(
                ft.View(
                    "/store",
                    [
                        ft.AppBar(title=ft.Text("Store"), bgcolor=ft.colors.SURFACE_VARIANT),
                        ft.ElevatedButton('Buy iPhone 15 Pro Max', on_click=lambda _: page.go('/iPhone 15 Pro Max')),
                    ],
                )
            )
        # 购买iPhone视图
        if page.route == "/iPhone 15 Pro Max":
            page.views.append(
                ft.View(
                    "/iPhone 15 Pro Max",
                    controls=[
                        ft.AppBar(
                            title=ft.Text("Buy iPhone"), 
                            bgcolor=ft.colors.SURFACE_VARIANT,
                            leading=ft.IconButton(
                                icon=ft.icons.ARROW_BACK_IOS,
                                on_click=lambda e: e.page.go_back(),
                                color='black'
                            ),
                        ),
                        ft.Text('Test')
                    ]
                )
            )
        page.update()

    def view_pop(view):
        page.views.pop()
        top_view = page.views[-1]
        page.go(top_view.route)

    page.on_route_change = route_change
    page.on_view_pop = view_pop
    page.go(page.route)

ft.app(target=main)

效果验证 #

• 从「主页」→「商店」→「购买iPhone」后，点击系统返回或自定义返回按钮，均会回到「商店」页面
• 自定义返回按钮的过渡动画与系统返回一致，方向正确且平滑

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