在 flet 中为页面添加 bottomappbar 时，仅设置 `page.bottom_appbar` 属性并不足以使其立即显示；必须显式调用 `page.update()` 触发界面重绘，否则组件不会渲染。
Flet 的 BottomAppBar 是一个固定在页面底部的导航栏组件，常用于移动端风格的 UI（如底部图标导航）。与常规控件不同，它属于 Page 的顶层属性（而非通过 page.add() 添加），因此需直接赋值给 page.bottom_appbar，但赋值后必须手动刷新页面状态。
✅ 正确实现步骤
- 创建 BottomAppBar 实例（可包含 Row、IconButton、FloatingActionButton 等）
- 赋值给 page.bottom_appbar
- 调用 page.update() 强制刷新
以下是修正后的 StartPage 示例（关键修复已加注释）：
from flet import *
import flet
class StartPage(UserControl):
def __init__(self, show_game_page, page):
super().__init__()
self.show_game_page = show_game_page
self.page = page
def build(self):
# ✅ 构建底部栏内容（示例：带图标的 Row）
self.player_row = Row(
controls=[
IconButton(icons.HOME, icon_color=colors.WHITE),
IconButton(icons.SEARCH, icon_color=colors.WHITE),
IconButton(icons.PERSON, icon_color=colors.WHITE),
],
alignment=MainAxisAlignment.SPACE_AROUND,
)
# ✅ 设置 BottomAppBar —— 注意：此时尚未渲染
self.page.bottom_appbar = BottomAppBar(
content=self.player_row,
bgcolor=colors.GREY_400,
visible=True,
)
# ✅ 关键一步：必须调用 update() 才能生效！
self.page.update()
# 返回主内容（例如顶部标题或主体区域）
return Container(
content=Text("Start Page", size=24, color=colors.BLACK),
alignment=alignment.center,
)⚠️ 注意事项
- ❌ 不要在 build() 中重复设置 page.bottom_appbar 并多次调用 update()（可能引发性能问题或异常）；建议仅在初始化或状态变更时设置一次并更新。
- ✅ 若需动态显示/隐藏 BottomAppBar，可修改 page.bottom_appbar.visible 后再次调用 page.update()。
- ? BottomAppBar 默认适配移动端布局；在桌面端可能被截断或表现异常，建议结合 page.adaptive 或响应式逻辑控制其可见性。
- ? page.update() 是 Flet 的核心刷新机制——所有对 page 属性的变更（如 title、scroll、vertical_alignment 等）均需主动调用它才能反映到 UI。
? 小结
Flet 的 BottomAppBar 不是“添加型”控件，而是“配置型”页面装饰器。它的生命周期依赖于 page.update() 的显式触发。牢记这一原则，即可避免常见空白底部栏问题，确保导航体验完整可靠。
