如何在 Flet 中正确实现 BottomAppBar

在 flet 中为页面添加 bottomappbar 时，仅设置 `page.bottom_appbar` 属性并不足以使其立即显示；必须显式调用 `page.update()` 触发界面重绘，否则组件不会渲染。

Flet 的 BottomAppBar 是一个固定在页面底部的导航栏组件，常用于移动端风格的 ui（如底部图标导航）。与常规控件不同，它属于 Page 的顶层属性（而非通过 page.add() 添加），因此需直接赋值给 page.bottom_appbar，但赋值后必须手动刷新页面状态。

✅ 正确实现步骤

1. 创建 BottomAppBar 实例（可包含 Row、IconButton、FloatingActionButton 等）
2. 赋值给 page.bottom_appbar
3. 调用 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() 的显式触发。牢记这一原则，即可避免常见空白底部栏问题，确保导航体验完整可靠。