仅使用 Python 创建的 Web 应用程序（前端版本）第03章Streamlit-多页面

接下来，我们将解释多页面切换。 Streamlit 没有“多页面”或“页面路由”等功能。 另一方面，通过根据用户动作切换要执行的功能，可以使其看起来好像存在“多个页面”。
注意：我认为它类似于 SinglePageApplication (SPA)。 然而，根据 React、Vue 等中使用的 URL 路径来更改页面的路由很困难。 还有一个用于获取查询参数的实验性 API，但如果您确实需要这种功能，我认为认真尝试编写 React 或 Vue 是个好主意。

我们来看一个通过按下按钮来切换页面的示例，如下所示。


代码如下：

import streamlit as st

def page1():
    st.title("Page1")

def page2():
    st.title("Page2")


pages = dict(
    page1="页面1",
    page2="页面2",
)

page_id = st.sidebar.selectbox( 
    "页面名",
    ["page1", "page2"],
    format_func=lambda page_id: pages[page_id], 
)

if page_id == "page1":
    page1()

if page_id == "page2":
    page2()

解释：
def page1(): st.title(“Page1”) 和 def page2(): st.title(“Page2”): 这两个函数分别定义了两个页面的内容。st.title 用于在页面上显示标题。

pages = dict(page1=“页面1”, page2=“页面2”): 创建了一个字典，将页面的 ID 映射到对应的显示名称。

page_id = st.sidebar.selectbox(“页面名”, [“page1”, “page2”], format_func=lambda page_id: pages[page_id]): 使用 st.sidebar.selectbox 创建了一个下拉框，允许用户选择要查看的页面。format_func 参数用于将页面的 ID 转换为显示名称。

if page_id == “page1”: page1() 和 if page_id == “page2”: page2(): 根据用户选择的页面 ID，调用相应的页面函数以显示对应的内容。

页面之间交换数据

在真正的Web应用程序中，页面不仅仅会改变，而且用户输入的值可能会显示在单独的页面上。 让我们举个例子，如下所示


代码：

import streamlit as st

def page1():
    st.title("What's your name?")
    st.text_input("Name", key="name")


def page2():
    name = st.session_state["name"]
    st.title(f"Hello, {name}")

pages = dict(
    page1="页面1",
    page2="页面2",
)

page_id = st.sidebar.selectbox( 
    "页面名",
    ["page1", "page2"],
    format_func=lambda page_id: pages[page_id], 
)

if page_id == "page1":
    page1()

if page_id == "page2":
    page2()

创建一个提交按钮

代码如下：

import streamlit as st

def page1():
    st.title("What's your name?")

    def change_page():
        st.session_state["page-select"] = "page2"

    with st.form(key="name-form"):
        st.text_input("Name", key="name")
        st.form_submit_button(label="Submit", on_click=change_page)

def page2():
    name = st.session_state["name"]
    st.title(f"Hello, {name}")

pages = dict(
    page1="页面1",
    page2="页面2",
)

page_id = st.sidebar.selectbox(
    "页面名",
    ["page1", "page2"],
    format_func=lambda page_id: pages[page_id],
    key="page-select",
)

if page_id == "page1":
    page1()

if page_id == "page2":
    page2()

解释：
def page1(): …: page1 函数定义了第一个页面的内容。用户在该页面中被要求输入姓名，并且有一个提交按钮。当用户点击提交按钮时，会触发 change_page 函数，将 st.session_state[“page-select”] 设置为 “page2”，从而切换到第二个页面。

def change_page(): st.session_state[“page-select”] = “page2”: change_page 函数是一个回调函数，当用户在第一个页面点击提交按钮时，它被调用，将 st.session_state[“page-select”] 设置为 “page2”。

with st.form(key=“name-form”): …: 使用 st.form 创建了一个表单，表单的 key 被设置为 “name-form”。在表单中，有一个文本输入框用于输入姓名，以及一个提交按钮。

st.form_submit_button(label=“Submit”, on_click=change_page): 提交按钮，当用户点击时，调用 change_page 函数，切换到第二个页面。

def page2(): …: page2 函数定义了第二个页面的内容。在该页面中，通过访问 st.session_state[“name”] 获取用户在第一个页面输入的姓名，并显示问候消息。

name = st.session_state[“name”]: 从会话状态中获取用户输入的姓名。

st.title(f"Hello, {name}"): 显示问候消息，包括用户输入的姓名。

page_id = st.sidebar.selectbox(…, key=“page-select”): 侧边栏的下拉框用于选择当前页面。key=“page-select” 确保选择框的状态能够在页面之间进行正确的保存和切换。

if page_id == “page1”: page1(): 根据用户选择的页面 ID，调用相应的页面函数以显示对应的内容。

if page_id == “page2”: page2(): 如果用户选择的是第二个页面，则调用 page2 函数显示问候消息。