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設定導航選單。

# 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()

透過此設置，側邊欄導航會自動生成，顯示指定的頁面及其圖示。

---

頁1：簡介

intro.py文件用作主頁。

# app_pages/intro.py
import streamlit as st

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

if __name__ == "__page__":
    intro()

當使用者造訪此頁面時，他們將看到應用程式的介紹以及如何導航的說明。

---

頁2：了解st.navigation

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

# 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()

---

頁面3：使用st.page_link

page_link_demo.py文件示範了內部和外部頁面之間的連結。

# 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()

這種方法允許使用者在應用程式內導航或跳到外部資源。

---

頁面4：使用st.switch_page進行程式導覽

switch_page_demo.py檔案展示了以程式方式切換頁面。

# 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()

此方法將導覽與側邊欄分離，提供對使用者何時以及如何切換頁面的更多控制。

---

結論

Streamlit的導航功能使建立用戶友好的多頁面應用程式變得容易。使用st.navigation、st.page_link和st.switch_page，您可以建立直覺且動態的導航體驗。

---

? 取得程式碼：GitHub - jamesbmour/blog_tutorials
?相關的Streamlit教學：JustCodeIt
? 支持我的工作：Buy Me a Coffee

以上是Streamlit 零件頁面導航得到簡化的詳細內容。更多資訊請關注PHP中文網其他相關文章！