引言

在前几篇文章中，我们介绍了 Remi 的基础组件、布局管理、事件处理和动态更新功能。本文将深入探讨 Remi 的多页面应用开发，学习如何实现页面切换与路由功能。通过多页面应用，我们可以构建更复杂的 Web 应用，例如仪表盘、管理系统等。

多页面应用简介

在 Remi 中，多页面应用是通过动态切换根容器实现的。每个页面可以是一个独立的容器（如 VBox 或 HBox），并通过事件或路由机制切换显示。Remi 本身不提供内置的路由功能，但我们可以通过 URL 参数或自定义逻辑实现类似的路由效果。

案例：创建一个多页面应用

我们将通过一个多页面应用的案例，演示如何实现页面切换与路由功能。最终效果如下：

1. 首页：显示欢迎信息和导航按钮。
2. 关于页：显示应用简介。
3. 设置页：显示设置选项。
4. 通过导航按钮在不同页面之间切换。

**本案例需要学习的新的函数原型

1. Container.remove_child 方法

功能：从容器中移除指定的子组件。

原型：

container.remove_child(child)  # child 是要移除的子组件

2. Container.children 属性

功能：获取容器的子组件列表。

示例：

children = container.children  # 获取所有子组件

代码实现

from remi import start, App, gui

class MultiPageApp(App):
    def __init__(self, *args):
        super(MultiPageApp, self).__init__(*args)
        

    def main(self):
        # 创建一个垂直布局容器作为根容器
        self.root_container = gui.VBox(width=400, style={'margin': 'auto', 'padding': '20px', 'border': '1px solid #ccc'})
        self.curr_page = None

        # 创建导航栏
        self.create_navbar()

        # 创建首页
        self.home_page = self.create_home_page()

        # 创建关于页
        self.about_page = self.create_about_page()

        # 创建设置页
        self.settings_page = self.create_settings_page()

        # 默认显示首页
        self.show_page(self.home_page)

        # 返回根容器
        return self.root_container

    def create_navbar(self):
        # 创建一个水平布局容器作为导航栏
        navbar = gui.HBox(width='100%', style={'margin-bottom': '20px'})

        # 创建导航按钮
        home_button = gui.Button("首页", width=80, height=30)
        home_button.onclick.do(lambda widget: self.show_page(self.home_page))

        about_button = gui.Button("关于", width=80, height=30)
        about_button.onclick.do(lambda widget: self.show_page(self.about_page))

        settings_button = gui.Button("设置", width=80, height=30)
        settings_button.onclick.do(lambda widget: self.show_page(self.settings_page))

        # 将按钮添加到导航栏
        navbar.append(home_button)
        navbar.append(about_button)
        navbar.append(settings_button)

        # 将导航栏添加到根容器
        self.root_container.append(navbar)

    def create_home_page(self):
        # 创建一个垂直布局容器作为首页
        home_page = gui.VBox(width='100%', style={'padding': '10px'})

        # 添加欢迎信息
        title = gui.Label("欢迎来到首页！", style={'font-size': '24px', 'text-align': 'center', 'margin-bottom': '20px'})
        home_page.append(title)

        return home_page

    def create_about_page(self):
        # 创建一个垂直布局容器作为关于页
        about_page = gui.VBox(width='100%', style={'padding': '10px'})

        # 添加关于信息
        title = gui.Label("关于我们", style={'font-size': '24px', 'text-align': 'center', 'margin-bottom': '20px'})
        description = gui.Label("这是一个用 Remi 构建的多页面应用示例。", style={'font-size': '16px', 'text-align': 'center'})
        about_page.append(title)
        about_page.append(description)

        return about_page

    def create_settings_page(self):
        # 创建一个垂直布局容器作为设置页
        settings_page = gui.VBox(width='100%', style={'padding': '10px'})

        # 添加设置选项
        title = gui.Label("设置", style={'font-size': '24px', 'text-align': 'center', 'margin-bottom': '20px'})
        option1 = gui.Label("选项 1：启用通知", style={'font-size': '16px', 'margin-bottom': '10px'})
        option2 = gui.Label("选项 2：更改主题", style={'font-size': '16px'})
        settings_page.append(title)
        settings_page.append(option1)
        settings_page.append(option2)

        return settings_page

    def show_page(self, page):
        # 清空根容器的内容（除了导航栏）
        if self.curr_page is not None:
            # print("----curr_page:", self.curr_page)
            # self.curr_page = page
            self.root_container.remove_child(self.curr_page)

        # 显示目标页面
        self.root_container.append(page)
        self.curr_page = page


# 启动应用
if __name__ == "__main__":
    start(MultiPageApp, address='0.0.0.0', port=8080)

代码解析

1. 根容器：
2. 使用 gui.VBox 创建一个垂直布局容器，作为整个应用的根容器。
3. 导航栏：
4. 使用 gui.HBox 创建一个水平布局容器，包含首页、关于和设置的导航按钮。
5. 通过 onclick.do 方法为按钮绑定点击事件，切换页面。
6. 页面创建：
7. 使用 gui.VBox 创建首页、关于页和设置页的容器。
8. 每个页面包含不同的内容（如标题、描述、选项等）。
9. 页面切换：
10. 在 show_page 方法中，清空根容器的内容（除了导航栏），然后显示目标页面。

运行效果

保存代码为 multi_page_app.py，

将代码保存在 RemiEg 项目的 day06 目录下，命名为 multi_page_app.py，RemiEg 项目目录结构大致如下：

├───.venv
│   ├───Lib
│   ├───.gitignore   
│   ├───CACHEDIR.TAG
│   ├───pyvenv.cfg
│   └───Scripts
├───.python-version
├───pyproject.toml
├───README.md
├───uv.lock
├───day01
│   └───hello.py
├───day02    
│   └───login_app.py
├───day03    
│   └───user_form_app.py
├───day04    
│   └───calculator_app.py
└───day05
│   └───progress_bar_app.py
└───day06
    └───multi_page_app.py

然后在终端中运行：

# 激活虚拟环境
.\.venv\Scripts\activate

# 运行脚本代码
python multi_page_app.py

打开浏览器，访问 http://127.0.0.1:8080，你将看到一个多页面应用。点击导航栏中的按钮，可以在首页、关于页和设置页之间切换。

运行效果如下：

多页面应用技巧

1. 页面复用：
2. 可以将页面的创建逻辑封装成独立的方法，方便复用和维护。
3. 动态加载：
4. 对于复杂的页面，可以动态加载内容，减少初始加载时间。
5. 路由扩展：
6. 可以通过 URL 参数或自定义逻辑实现更复杂的路由功能。

总结

本文详细介绍了如何使用 Remi 构建多页面应用，并通过一个案例演示了页面切换与路由功能的实现。在接下来的文章中，我们将深入探讨 Remi 与其他 Python 库的集成。

交流讨论

1. 你在使用 Remi 构建多页面应用时遇到过哪些问题？欢迎在评论区分享！
2. 你希望在本系列中看到哪些 Remi 的实际应用场景？欢迎留言告诉我们！

将陆续更新 Python 编程相关的学习资料！

作者：ICodeWR

标签：#python# #编程# #分享编程心得#