Streamlit 零件页面导航得到简化

在Streamlit中，页面间的导航是构建动态多页面应用程序的一项强大功能。本教程将探讨Streamlit中的页面导航，使用新的st.navigation、st.page_link和st.switch_page方法来创建无缝的用户体验。

---

为什么选择多页面应用？

Streamlit最初并非作为多页面应用程序框架构建的。然而，随着它的发展，Streamlit团队引入了支持多页面应用程序的功能。这些功能简化了导航，并为动态Web应用程序提供了可定制的选项。

---

项目结构设置

在本教程中，我们的项目结构遵循以下布局：

<code>project/
│
├── app.py  # 主应用程序文件
├── app_pages/
│   ├── intro.py
│   ├── navigation_intro.py
│   ├── page_link_demo.py
│   ├── switch_page_demo.py
</code>

app_pages目录中的每个文件都代表应用程序中的一个单独页面。

---

实现导航：app.py

让我们从在app.py中定义页面开始。此文件使用st.navigation设置导航菜单。

<code class="language-python"># app.py
import streamlit as st

# 页面导航
pages = [
    st.Page("app_pages/intro.py", title="简介", icon="?"),
    st.Page("app_pages/navigation_intro.py", title="st.navigation", icon="?"),
    st.Page("app_pages/page_link_demo.py", title="st.page_link", icon="?"),
    st.Page("app_pages/switch_page_demo.py", title="st.switch_page", icon="?"),
]

# 将页面添加到侧边栏导航
pg = st.navigation(pages, position="sidebar", expanded=True)

# 运行应用程序
pg.run()
</code>

通过此设置，侧边栏导航会自动生成，显示指定的页面及其图标。

---

页面1：简介

intro.py文件用作主页。

<code class="language-python"># app_pages/intro.py
import streamlit as st

def intro():
    st.title("Streamlit 页面导航教程")
    st.write("欢迎来到本Streamlit页面导航教程！")
    st.write("使用侧边栏在不同页面之间导航。")

if __name__ == "__page__":
    intro()
</code>

当用户访问此页面时，他们将看到应用程序的介绍以及如何导航的说明。

---

页面2：了解st.navigation

navigation_intro.py文件解释了如何使用st.navigation。

<code class="language-python"># app_pages/navigation_intro.py
import streamlit as st

def navigation_intro():
    st.title("st.navigation简介")
    st.write("`st.navigation`函数配置多页面Streamlit应用程序。")
    st.code("""
pages = [
    st.Page("app_pages/intro.py", title="简介", icon="?"),
    st.Page("app_pages/page1.py", title="页面1", icon="1️⃣"),
    st.Page("app_pages/page2.py", title="页面2", icon="2️⃣"),
]

pg = st.navigation(pages)
pg.run()
    """, language="python")
    st.write("这将创建一个侧边栏菜单，其中包含`pages`列表中指定的页面。")

if __name__ == "__page__":
    navigation_intro()
</code>

---

页面3：使用st.page_link

page_link_demo.py文件演示了内部和外部页面之间的链接。

<code class="language-python"># app_pages/page_link_demo.py
import streamlit as st

def page_link():
    st.title("使用st.page_link")
    st.page_link("app_pages/intro.py", label="跳转到简介", icon="?")
    st.page_link("app_pages/page_link_demo.py", label="刷新本页", icon="?")
    st.page_link("https://www.streamlit.io/", label="访问Streamlit", icon="?")

if __name__ == "__page__":
    page_link()
</code>

这种方法允许用户在应用程序内导航或跳转到外部资源。

---

页面4：使用st.switch_page进行编程导航

switch_page_demo.py文件展示了以编程方式切换页面。

<code class="language-python"># app_pages/switch_page_demo.py
import streamlit as st

def switch_page():
    st.title("使用st.switch_page")
    st.write("`st.switch_page`允许您以编程方式切换页面。")
    st.code("""
if st.button("跳转到简介"):
    st.switch_page("app_pages/intro.py")
    """, language="python")
    if st.button("跳转到简介"):
        st.switch_page("app_pages/intro.py")

if __name__ == "__page__":
    switch_page()
</code>

此方法将导航与侧边栏分离，提供对用户何时以及如何切换页面的更多控制。

---

结论

Streamlit的导航功能使构建用户友好的多页面应用程序变得容易。使用st.navigation、st.page_link和st.switch_page，您可以创建直观且动态的导航体验。

---

? 获取代码：GitHub - jamesbmour/blog_tutorials
? 相关的Streamlit教程：JustCodeIt
? 支持我的工作：Buy Me a Coffee

以上是Streamlit 零件页面导航得到简化的详细内容。更多信息请关注PHP中文网其他相关文章！