Flet框架添加新视图后，如何向当前页面添加元素？

问题分析 #

在Flet的多视图路由架构中，page.add()默认操作的是根页面的控件集合，而非当前栈顶的View控件。当你通过page.views.append()添加视图后，当前显示的内容由page.views栈中的最后一个View决定，因此直接调用page.add()无法将元素添加到当前活跃的页面中。

解决方案 #

要操作当前活跃的页面，需要获取page.views栈的最后一个元素（即当前显示的View实例），然后修改它的controls列表，最后调用page.update()刷新界面。

修改后的代码示例 #

import flet as ft

def main(page: ft.Page):
    page.title = "Routes Example"

    def route_change(route):
        page.views.clear()
        page.views.append(
            ft.View(
                "/",
                [
                    ft.AppBar(title=ft.Text("Flet app"), bgcolor=ft.colors.SURFACE_VARIANT),
                    ft.ElevatedButton("Visit Store", on_click=lambda _: page.go("/store")),
                ],
            )
        )
        if page.route == "/store":
            page.views.append(
                ft.View(
                    "/store",
                    [
                        ft.AppBar(title=ft.Text("Store"), bgcolor=ft.colors.SURFACE_VARIANT),
                        ft.ElevatedButton("Go Home", on_click=lambda _: page.go("/")),
                        ft.ElevatedButton(text="Show current route", on_click=show_route_button) 
                    ],
                )
            )
        page.update()
    
    def show_route_button(e):
        # 获取当前活跃的View（栈顶元素）
        current_view = page.views[-1]
        # 向当前View的控件列表添加元素
        current_view.controls.append(ft.Text(f"Current route: {page.route}"))
        # 刷新页面
        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)

额外优化（可选） #

如果需要避免重复添加相同内容，可以在添加前检查控件是否已存在：

def show_route_button(e):
    current_view = page.views[-1]
    # 检查是否已添加过路由文本
    route_text_exists = any(
        isinstance(ctrl, ft.Text) and ctrl.value.startswith("Current route:")
        for ctrl in current_view.controls
    )
    if not route_text_exists:
        current_view.controls.append(ft.Text(f"Current route: {page.route}"))
        page.update()

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