如何在Streamlit多页应用中实现点击页面后隐藏侧边栏？

核心思路 #

通过st.session_state持久化当前选中的页面状态，根据页面类型决定是否渲染侧边栏；对于需要隐藏侧边栏的页面，要么通过页面配置折叠侧边栏，要么用CSS直接隐藏。

方案一：通过页面配置动态折叠侧边栏 #

这种方法利用Streamlit原生的st.set_page_config控制侧边栏状态，适合需要保留侧边栏折叠按钮的场景。

修改后的代码：

import streamlit as st
from streamlit_option_menu import option_menu
# 导入你的页面模块：account、trending、your_posts、about

def run():
    # 初始化当前页面状态，默认选中Trending
    if "current_page" not in st.session_state:
        st.session_state.current_page = "Trending"

    # 定义需要隐藏侧边栏的页面集合
    hide_sidebar_pages = {"Account"}

    if st.session_state.current_page not in hide_sidebar_pages:
        # 在需要显示侧边栏的页面渲染导航菜单
        with st.sidebar:
            app = option_menu(
                menu_title="pondering",
                options=['Account','Trending','Your Posts','About'],
                default_index=['Account','Trending','Your Posts','About'].index(st.session_state.current_page)
            )
            # 更新当前页面状态
            st.session_state.current_page = app
    else:
        # 对需要隐藏侧边栏的页面，设置初始状态为折叠
        st.set_page_config(initial_sidebar_state="collapsed")
        app = st.session_state.current_page

    # 页面路由逻辑
    if app == 'Account':
        account.app()
    elif app == 'Trending':
        trending.app()
    elif app == 'Your Posts':
        your_posts.app()
    elif app == 'About':
        about.app()

if __name__ == "__main__":
    run()

方案二：用CSS完全隐藏侧边栏 #

如果需要彻底隐藏侧边栏（包括折叠按钮），可以通过注入自定义CSS实现。

修改后的代码：

import streamlit as st
from streamlit_option_menu import option_menu
# 导入你的页面模块：account、trending、your_posts、about

def hide_sidebar():
    # 注入CSS隐藏侧边栏
    st.markdown(
        """
        <style>
        section[data-testid="stSidebar"] {
            display: none !important;
        }
        </style>
        """,
        unsafe_allow_html=True
    )

def run():
    # 初始化当前页面状态
    if "current_page" not in st.session_state:
        st.session_state.current_page = "Trending"

    hide_sidebar_pages = {"Account"}

    if st.session_state.current_page not in hide_sidebar_pages:
        with st.sidebar:
            app = option_menu(
                menu_title="pondering",
                options=['Account','Trending','Your Posts','About'],
                default_index=['Account','Trending','Your Posts','About'].index(st.session_state.current_page)
            )
            st.session_state.current_page = app
    else:
        # 调用隐藏方法
        hide_sidebar()
        app = st.session_state.current_page

    # 页面路由逻辑
    if app == 'Account':
        account.app()
    elif app == 'Trending':
        trending.app()
    elif app == 'Your Posts':
        your_posts.app()
    elif app == 'About':
        about.app()

if __name__ == "__main__":
    run()

关键说明 #

1. st.session_state用于跨会话保存当前页面，避免每次刷新后重置选中状态
2. 可根据需求调整hide_sidebar_pages集合，添加需要隐藏侧边栏的页面
3. 方案一中st.set_page_config必须放在所有其他Streamlit命令之前调用，否则会报错
4. 方案二的CSS方法会覆盖Streamlit默认的侧边栏样式，适合需要完全隐藏的场景

内容的提问来源于stack exchange，提问作者JITHIN