Taipy GUI 中 Menu Page 内嵌 Navbar 的实现与问题解决-Python教程-PHP中文网

Taipy GUI 中 Menu Page 内嵌 Navbar 的实现与问题解决

霞舞

发布： 2025-08-02 19:22:23

原创

871人浏览过

taipy gui 中 menu page 内嵌 navbar 的实现与问题解决

本文旨在解决 Taipy GUI 应用中，在 Menu Control 页面内嵌入 Navbar 组件，并实现页面导航功能的问题。通过修改 lov 属性中的路由配置，确保 Navbar 组件能够正确地在当前页面内切换不同的 Markdown 内容，避免跳转到新页面。本文将提供详细的配置方法和示例代码，帮助开发者更好地理解和使用 Taipy GUI 的 Navbar 组件。

Taipy GUI 中 Navbar 组件的使用

Taipy GUI 提供了强大的 Navbar 组件，方便开发者在应用中创建导航栏，实现页面之间的切换。然而，在复杂的应用结构中，例如在 Menu Control 页面内嵌入 Navbar 时，可能会遇到一些问题，例如点击 Navbar 选项时跳转到新页面，而不是在当前页面内更新内容。

问题描述

在 Menu Control 页面中，开发者希望使用 Navbar 组件在同一页面内切换不同的 Markdown 内容，例如在 "Download" 和 "Instance" 两个选项之间切换。但是，默认情况下，点击 Navbar 选项会导致页面跳转，而不是在当前页面内更新。

解决方案

解决这个问题的关键在于正确配置 Navbar 组件的 lov (List of Values) 属性。lov 属性定义了 Navbar 中显示的选项以及对应的路由。为了在当前页面内切换内容，需要在 lov 属性中的路由前面添加 /，表示相对于当前页面的相对路径。

示例代码

假设我们有以下 Markdown 内容：

instance_md = """
# <strong>Data</strong> Upload
## Let's upload data now
"""

download_md = """
# <strong>Data</strong> download
## Let's download data now
"""

登录后复制

然后，我们可以使用以下代码配置 Navbar 组件：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

from taipy.gui import Markdown

live = [
    ('/download_md','Download'), 
    ('/instance_md', 'Instance')
]

live_md = Markdown("user_interface/taipy/pages/live/live.md")

登录后复制

在 live.md 文件中，添加以下代码：

<center><|navbar|lov={live}|></center>

<|page_content|>

登录后复制

接下来，在 Taipy GUI 的 pages 字典中，将包含 Navbar 的页面添加到路由中：

from taipy.gui import Gui, Markdown

root = Markdown("root.md")
home_md = Markdown("home.md")
interact_md = Markdown("interact.md")

pages = {
    '/': root,
    "Home ":home_md,
    "Interact":interact_md, # This is where the live_md page is used
}

gui = Gui(pages=pages)
gui.run(debug=True, port=5001)

登录后复制

注意：

请确保 interact_md 对应的是包含 Navbar 组件的 Markdown 文件。
<|page_content|> 用来显示动态切换的内容，你需要根据实际情况调整。
instance_md 和 download_md 需要在 interact.py 中定义，并根据 Navbar 的选择动态赋值给 page_content 变量。

完整示例

from taipy.gui import Gui, Markdown

instance_md = """
# <strong>Data</strong> Upload
## Let's upload data now
"""

download_md = """
# <strong>Data</strong> download
## Let's download data now
"""

live = [
    ('/download_md','Download'), 
    ('/instance_md', 'Instance')
]

page_content = download_md # 初始显示 Download 内容

interact_md = """
<center><|navbar|lov={live}|></center>

<|page_content|>
"""

def on_change(state, var_name, var_value):
    if var_name == "live":
        if var_value == "/download_md":
            state.page_content = download_md
        elif var_value == "/instance_md":
            state.page_content = instance_md

root = Markdown("root.md")
home_md = Markdown("home.md")

pages = {
    '/': root,
    "Home ":home_md,
    "Interact":interact_md,
}

gui = Gui(pages=pages)
gui.run(debug=True, port=5001)

登录后复制