如何在Python Flet的自定义页面中实现BottomAppBar并正常显示？

核心原因 #

在UserControl的build()方法中修改page.bottom_appbar后，未触发页面更新操作，Flet不会自动感知page属性的修改并刷新界面。此外代码中存在拼写错误，也会导致功能异常。

具体修复步骤 #

1. 修正代码拼写错误
   主文件中Startgage是拼写错误，应改为StartPage，同时确保show_game_page函数已定义（示例中补充空实现）。

2. 添加页面更新调用
   在StartPage的build()方法中设置完bottom_appbar后，调用self.page.update()触发界面刷新。

3. 确保依赖组件存在
   提前定义player_row组件，避免因未定义导致报错。

修正后的完整代码 #

主文件（main.py）

import flet
from flet import *
from pages.start import StartPage

def show_game_page():
    # 补充你的页面跳转逻辑
    pass

def main(page: Page):
    app = StartPage(show_game_page, page)
    page.add(app)

if __name__ == "__main__":
    flet.app(
        target=main,
        assets_dir='assets'
    )

StartPage文件（pages/start.py）

from flet import *

class StartPage(UserControl):
    def __init__(self, show_game_page, page):
        super().__init__()
        self.show_game_page = show_game_page
        self.page = page
        # 提前定义player_row组件
        self.player_row = Row(
            controls=[
                Text("玩家1"),
                Text("玩家2")
            ],
            alignment=MainAxisAlignment.CENTER
        )

    def build(self):
        self.page.bottom_appbar = BottomAppBar(
            content=self.player_row,
            bgcolor=colors.GREY_400,
            visible=True,
        )
        # 关键：调用page.update()刷新界面
        self.page.update()
        
        # 返回StartPage的主内容（示例用简单Container）
        return Container(
            content=Text("欢迎来到起始页面"),
            alignment=alignment.center,
            expand=True
        )

补充说明 #

• UserControl的build()方法主要负责返回该控件自身的内容，修改全局的page属性（如bottom_appbar）不属于控件自身内容的一部分，因此需要手动调用page.update()让Flet更新整个页面状态。
• 后续切换页面并隐藏/修改BottomAppBar时，同样需要在修改后调用page.update()。

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