前面的几篇文章，基本讲清楚了 Flet 界面设计，但都是“单个界面”。在实际项目中，肯定需要设计“多个界面”啊，多个界面直接怎么导航呢？也就是 Flet 的路由功能，这是Flet开发的必备技术。

依然保持“任务驱动”学习模式，下面举例说明。

项目需求（假设）：一个手机app应用，在界面底部有“首页、新闻、购物、我的”4个导航标签，页面顶部显示“页面标题”，新闻列表页可点击进入新闻详情页，从详情页可点击返回。先上最后效果，然后逐步拆解，从中学习 多页面设计、路由与导航设计。

第一步，准备数据。

因为是模拟，所以新闻数据，就用一个字典数据吧。实际项目中，可能需要从数据库中读取。以下是模拟的新闻数据：

# 模拟的新闻数据
news_items = [
    {"title": "新闻1标题", "content": "这是新闻1的详细内容"},
    {"title": "新闻2标题", "content": "这是新闻2的详细内容"},
    {"title": "新闻3标题", "content": "这是新闻3的详细内容"},
    {"title": "新闻4标题", "content": "这是新闻4的详细内容"},
    {"title": "新闻5标题", "content": "这是新闻5的详细内容"}
]

第二步，定义手机app总体外观。

在main函数中，定义窗口的尺寸（参考手机9:16比例，或其他竖形比例），标题，设置启动居中。代码如下：

def main(page: ft.Page):
    page.title = "路由导航&手机界面"
    page.theme_mode = "light"
    page.padding = 0
    
    # 设置窗口大小
    page.window_height = 640
    page.window_width = 360

    # 窗口居中
    page.window_center()

第三步，定义4个页面（首页、新闻、购物、我的）的显示内容。

也在 main 函数中定义。为了简化演示，内容就一个文本内容。在实际项目中，其内容可能需要自定义一个类，来获取数据库相关内容。代码如下：

def main(page: ft.Page):
    ....
    # 窗口居中
    page.window_center()

    # 第一个页面“首页”内容，放在一个 Container 容器控件中
    home_content = ft.Container(content=ft.Text("欢迎来到首页"), alignment=ft.alignment.center)

    # 第二个页面“新闻”页面内容，放在一个 ListView 容器控件中
    news_list = ft.ListView(
        [ft.ListTile(title=ft.Text(item["title"]), on_click=lambda e, item=item: show_news_detail(item)) for item in news_items]
    )

    # 第三个页面“购物”页面内容，也放在一个 Container 容器控件中
    shopping_content = ft.Container(content=ft.Text("这里是购物页面"), alignment=ft.alignment.center)

    # 第四个页面“我的”页面内容，还是放在一个 Container 容器控件中
    profile_content = ft.Container(content=ft.Text("这是个人中心"), alignment=ft.alignment.center)

注意：为了显示新闻详情页，在新闻列表上，绑定了一个自定义函数 show_news_detail，以便按新闻id显示新闻内容。我们实现这个函数，也就实现了这个“新闻详情页”：

# 自定义函数：显示新闻详情
    def show_news_detail(news_item):
        nonlocal current_content, previous_index
        previous_index = nav_bar.selected_index  # 保存当前选中的导航栏索引
        current_content = ft.Column(
            controls=[
                ft.Text(news_item["content"], expand=True)
            ]
        )
        update_app_bar(news_item["title"], has_back_button=True)  # 添加返回按钮
        page.controls.clear()
        page.controls.extend([app_bar, nav_bar, current_content])
        page.update()

知识扩充：nonlocal 是 Python 中的一个关键字，用于在嵌套函数（即一个函数定义在另一个函数内部）中指定某个变量不是本地变量也不是全局变量，而是外部封闭作用域中的变量。换句话说，nonlocal 声明使得我们可以在内部函数中修改外部函数的局部变量，而不会创建一个新的局部变量。

第四，定义界面底部导航标签。

这里用到 Flet 的内置控件 NavigationBar，设置相关属性即可，就这么简单，何必复杂呢？代码如下：

def main(page: ft.Page):
    ....
    # 第四个页面“我的”页面内容，还是放在一个 Container 容器控件中
    profile_content = ft.Container(content=ft.Text("这是个人中心"), alignment=ft.alignment.center)

    # 使用 NavigationBar 控件，设计界面底部导航
    nav_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(icon=ft.icons.HOME, label="首页"),
            ft.NavigationDestination(icon=ft.icons.WIFI, label="新闻"),
            ft.NavigationDestination(icon=ft.icons.SHOPPING_CART, label="购物"),
            ft.NavigationDestination(icon=ft.icons.PERSON, label="我的"),
        ],
        on_change=lambda e: update_page_content(e.control.selected_index),
    )

这里注意核心代码 on_change=lambda e: update_page_content(e.control.selected_index)，当导航标签切换的时候，触发 update_page_content 函数，参数是 NavigationBar 控件的索引号，就是通过这个函数，切换不同的页面内容，实现该函数的代码如下：

# 自定义函数：更新页面内容
    def update_page_content(index):
        nonlocal current_content
        current_content = pages[index]
        update_app_bar("应用标题" if index == 0 else nav_bar.destinations[index].label)
        page.controls.clear()
        page.controls.extend([app_bar, nav_bar, current_content])
        page.update()

第五，定义顶部应用标题栏。

使用到 Flet 内置控件 AppBar，为了简化，就显示标题名称即可，也不显示图标。

app_bar = ft.AppBar(
        title=ft.Text("应用标题"),
    )

但是对于新闻详细页面，我们需要显示在这里显示新闻标题，并显示一个返回按钮。为此，我们增加一个自定义函数，实现对 AppBar 控件的修改，代码如下：

# 自定义函数：修改/更新页面顶部的应用栏
    def update_app_bar(title_text, has_back_button=False):
        app_bar.title = ft.Text(title_text)
        if has_back_button:
          # 设一个返回图标按钮，
          # 绑定 on_click 事件，因此需要一个响应函数 back_to_main
            app_bar.leading = ft.IconButton(icon=ft.icons.ARROW_BACK, on_click=back_to_main)
        else:
            app_bar.leading = None  # 不要图标按钮
        page.update()

为了实现从新闻详情页返回，我们需要实现响应函数 back_to_main，代码如下：

# 自定义函数：返回主页
    def back_to_main(_):  # 接收但忽略事件对象
        nonlocal current_content
        nav_bar.selected_index = previous_index  # 恢复之前的导航栏索引
        update_page_content(previous_index)  # 更新为之前的页面内容

第六，做好上述准备后，把相关对象添加到 page 根控件中。

因为是多个页面对象，为了实现“切换”，需要定义“当前页面” current_content。代码如下：

   # 页面内容映射
    pages = [
        home_content,
        news_list,
        shopping_content,
        profile_content,
    ]

    # 初始显示的内容
    current_content = pages[0]
    previous_index = 0  # 用于保存进入详情前的页面索引    
   
    # 添加控件到页面
    page.add(app_bar, nav_bar, current_content)

再最后经典一句，大功告成：

ft.app(target=main)

以下是完整代码，可供参考：

import flet as ft

# 模拟的新闻数据
news_items = [
    {"title": "新闻1标题", "content": "这是新闻1的详细内容"},
    {"title": "新闻2标题", "content": "这是新闻2的详细内容"},
    {"title": "新闻3标题", "content": "这是新闻3的详细内容"},
    {"title": "新闻4标题", "content": "这是新闻4的详细内容"},
    {"title": "新闻5标题", "content": "这是新闻5的详细内容"}
]

def main(page: ft.Page):
    page.title = "路由导航&手机界面"
    page.theme_mode = "light"
    page.padding = 0
    
    # 设置窗口大小
    page.window_height = 640
    page.window_width = 360

    # 窗口居中
    page.window_center()

    # 首页内容
    home_content = ft.Container(content=ft.Text("欢迎来到首页"), alignment=ft.alignment.center)

    # 新闻页面内容
    news_list = ft.ListView(
        [ft.ListTile(title=ft.Text(item["title"]), on_click=lambda e, item=item: show_news_detail(item)) for item in news_items]
    )

    # 购物页面内容
    shopping_content = ft.Container(content=ft.Text("这里是购物页面"), alignment=ft.alignment.center)

    # 我的页面内容
    profile_content = ft.Container(content=ft.Text("这是个人中心"), alignment=ft.alignment.center)

    # 使用 NavigationBar
    nav_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(icon=ft.icons.HOME, label="首页"),
            ft.NavigationDestination(icon=ft.icons.WIFI, label="新闻"),
            ft.NavigationDestination(icon=ft.icons.SHOPPING_CART, label="购物"),
            ft.NavigationDestination(icon=ft.icons.PERSON, label="我的"),
        ],
        on_change=lambda e: update_page_content(e.control.selected_index),
    )

    # 更新页面内容
    def update_page_content(index):
        nonlocal current_content
        current_content = pages[index]
        update_app_bar("应用标题" if index == 0 else nav_bar.destinations[index].label)
        page.controls.clear()
        page.controls.extend([app_bar, nav_bar, current_content])
        page.update()
    
    # 页面顶部的应用栏
    def update_app_bar(title_text, has_back_button=False):
        app_bar.title = ft.Text(title_text)
        if has_back_button:
            app_bar.leading = ft.IconButton(icon=ft.icons.ARROW_BACK, on_click=back_to_main)
        else:
            app_bar.leading = None  # 确保没有 leading 按钮
        page.update()

    app_bar = ft.AppBar(
        title=ft.Text("应用标题"),
    )

    # 页面内容映射
    pages = [
        home_content,
        news_list,
        shopping_content,
        profile_content,
    ]

    # 初始显示的内容
    current_content = pages[0]
    previous_index = 0  # 用于保存进入详情前的页面索引

    # 添加控件到页面
    page.add(app_bar, nav_bar, current_content)

    # 显示新闻详情
    def show_news_detail(news_item):
        nonlocal current_content, previous_index
        previous_index = nav_bar.selected_index  # 保存当前选中的导航栏索引
        current_content = ft.Column(
            controls=[
                ft.Text(news_item["content"], expand=True)
            ]
        )
        update_app_bar(news_item["title"], has_back_button=True)  # 添加返回按钮
        page.controls.clear()
        page.controls.extend([app_bar, nav_bar, current_content])
        page.update()

    # 返回主页
    def back_to_main(_):  # 接收但忽略事件对象
        nonlocal current_content
        nav_bar.selected_index = previous_index  # 恢复之前的导航栏索引
        update_page_content(previous_index)  # 更新为之前的页面内容


ft.app(target=main)

（汇报完毕，感谢收看，收藏又点赞！）

#python# #Flet #手机# #手机app