Flet集成自定义导航栏报错：'flet_core.page'无'controls'属性

错误原因分析 #

出现AttributeError: module 'flet_core.page' has no attribute 'controls'的核心问题是：导航栏代码错误引用了flet_core.page模块本身，而非Flet框架在页面初始化时传递的实例化Page对象。单独运行导航栏时，代码直接操作本地创建的Page实例不会触发问题；但集成到路由项目后，导航栏组件如果没正确接收传入的Page实例，就会误把模块当实例调用属性。

修复导航栏动画错误 #

1. 修正Page对象引用 #

确保导航栏组件通过参数接收外部传入的Page实例，而非直接导入模块：

# 错误写法（触发报错）
from flet_core import page

def build_navbar():
    page.controls.add(...)  # 此处访问的是模块，不是实例

# 正确写法
def build_navbar(page):
    # 使用传入的page实例进行操作
    page.controls.add(...)

2. 路由页面中传递Page实例 #

在路由控制页加载导航栏时，将当前页面的Page实例传递给导航栏组件：

# 路由控制页示例
import flet as ft
from navbar import build_navbar

def main_page(page: ft.Page):
    # 传递当前page实例给导航栏
    navbar = build_navbar(page)
    page.add(navbar)
    # 其他页面内容...

ft.app(target=main_page, route_url_strategy="hash")

为导航项添加页面跳转功能 #

利用Flet的page.go()方法实现路由跳转，在导航栏按钮的点击事件中调用该方法：

1. 导航栏组件中添加跳转逻辑 #

def build_navbar(page: ft.Page):
    # 导航项示例：首页、设置页
    home_btn = ft.ElevatedButton(
        "首页",
        on_click=lambda _: page.go("/")  # 跳转到根路由
    )
    settings_btn = ft.ElevatedButton(
        "设置",
        on_click=lambda _: page.go("/settings")  # 跳转到设置路由
    )
    
    navbar = ft.Row([home_btn, settings_btn])
    return navbar

2. 路由控制中注册对应页面 #

在主启动页中配置路由映射：

# 主启动页示例
import flet as ft
from pages.main import main_page
from pages.settings import settings_page

def main(page: ft.Page):
    def route_change(route):
        page.views.clear()
        # 根路由加载首页
        if page.route == "/":
            page.views.append(ft.View("/", [main_page(page)]))
        # 设置路由加载设置页
        elif page.route == "/settings":
            page.views.append(ft.View("/settings", [settings_page(page)]))
        page.update()

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

ft.app(target=main, route_url_strategy="hash")

关键注意事项 #

• 所有操作页面的逻辑必须使用当前页面的Page实例，禁止直接导入flet_core.page模块进行操作。
• 路由跳转后需调用page.update()刷新页面状态，确保视图正确切换。
• 导航栏的动画组件（如展开/收起按钮）需绑定到传入的Page实例，动画触发逻辑才能正常修改页面控件。

内容的提问来源于stack exchange，提问作者Hasancan Çakıcıoğlu