如何在Python的Flet框架中实现导航栏及视图切换？

现有实现的问题分析 #

• 冗余的类初始化参数：NavBar的__init__方法完全照搬父类ft.NavigationBar的所有参数，大部分参数在当前实现中并未使用，导致代码臃肿、可读性差。
• 低效的视图可见性管理：on_changing_navigation_page方法每次切换都遍历所有视图设置可见性，实际上只需要切换上一个选中视图和当前选中视图的状态即可，全遍历属于不必要的性能开销。
• 不必要的重复赋值：__init__中多次执行self.destinations = self.navigation_destinations，属于冗余操作。
• 高耦合的页面依赖：NavBar直接持有page对象并调用page.update()，组件与页面耦合度过高，不利于组件复用。
• 调试代码与逻辑冗余：大量打印语句不适合生产环境，且for循环后的else块逻辑意义不明，可移除。

优化方案建议 #

1. 简化类继承与初始化 #

使用**kwargs接收父类的可选参数，避免手动罗列所有父类参数，减少代码冗余。

2. 优化视图切换逻辑 #

记录上一次选中的索引，仅更新上一个视图和当前视图的可见性，避免全量遍历。

3. 用Stack组件管理视图 #

将所有待切换的视图放入ft.Stack中，通过控制子组件的可见性统一管理视图状态，更符合Flet的布局逻辑。

4. 解耦页面依赖 #

移除组件对page对象的直接持有，通过组件自身的update()方法更新视图，降低耦合度。

改进后的代码示例 #

import flet as ft
from typing import List


class NavBar(ft.NavigationBar):
    def __init__(
        self,
        navigation_destinations: List[ft.NavigationDestination],
        navigation_views: List[ft.Control],
        **kwargs
    ):
        # 使用**kwargs传递父类参数，简化初始化
        super().__init__(destinations=navigation_destinations, selected_index=0, **kwargs)
        self.navigation_views = navigation_views
        self._previous_index = 0
        
        # 初始化视图状态
        self._init_view_states()
        
        # 绑定切换事件
        self.on_change = self._on_navigation_change

    def _init_view_states(self):
        # 默认只显示第一个视图
        for idx, view in enumerate(self.navigation_views):
            view.visible = idx == 0

    def _on_navigation_change(self, e):
        # 隐藏上一个视图，显示当前视图
        self.navigation_views[self._previous_index].visible = False
        self.navigation_views[self.selected_index].visible = True
        
        # 更新索引记录
        self._previous_index = self.selected_index
        
        # 仅更新视图组件
        for view in self.navigation_views:
            view.update()


def main(page: ft.Page):
    def theme_changed(e):
        page.theme_mode = ft.ThemeMode.DARK if page.theme_mode == ft.ThemeMode.LIGHT else ft.ThemeMode.LIGHT
        theme_switcher.label = "Light theme" if page.theme_mode == ft.ThemeMode.LIGHT else "Dark theme"
        page.update()

    page.theme_mode = ft.ThemeMode.LIGHT
    theme_switcher = ft.Switch(label="Light theme", on_change=theme_changed)
    page.add(theme_switcher)

    # 创建导航目标
    d1 = ft.NavigationDestination(icon=ft.icons.BOOKMARK, label="View 1")
    d2 = ft.NavigationDestination(icon=ft.icons.BOOKMARKS, label="View 2")
    d3 = ft.NavigationDestination(icon=ft.icons.BOOKMARK_BORDER, label="View 3")

    # 创建视图并放入Stack中统一管理
    v1 = ft.Text("View 1 Content", size=24)
    v2 = ft.Text("View 2 Content", size=24)
    v3 = ft.Text("View 3 Content", size=24)
    view_stack = ft.Stack([v1, v2, v3], expand=True)
    page.add(view_stack)

    # 设置导航栏
    page.navigation_bar = NavBar(
        navigation_destinations=[d1, d2, d3],
        navigation_views=[v1, v2, v3],
        elevation=6,
        bgcolor=ft.colors.SURFACE_VARIANT
    )
    page.update()


if __name__ == "__main__":
    ft.app(target=main)

额外优化点 #

• 如果是复杂视图场景，建议使用Flet的View组件配合page.go()实现路由式导航，更适合多页面架构。
• 可以给视图切换添加animate_opacity等动画效果，提升用户体验。
• 移除调试用的打印语句，保持代码整洁。

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