在 Streamlit 多页面应用中隐藏侧边栏页面的方法-Python教程-PHP中文网

在 Streamlit 多页面应用中隐藏侧边栏页面的方法

DDD

发布： 2025-10-25 10:06:32

原创

569人浏览过

在 streamlit 多页面应用中隐藏侧边栏页面的方法

本文介绍了如何在 Streamlit 多页面应用中，通过 CSS 样式控制，实现点击特定页面时隐藏侧边栏的效果。通过自定义函数，将隐藏侧边栏的 CSS 代码嵌入到需要隐藏侧边栏的页面中，或者直接在每个页面中复制 CSS 代码，可以有效地控制侧边栏的显示与隐藏，从而优化用户体验。

Streamlit 是一款流行的 Python 库，用于快速构建数据科学和机器学习 Web 应用。在开发多页面应用时，侧边栏通常用于导航和控制。然而，在某些情况下，我们可能希望在特定页面隐藏侧边栏，以提供更专注的界面。以下介绍如何在 Streamlit 应用中实现这一功能。

使用 CSS 隐藏侧边栏

Streamlit 允许我们通过 st.markdown 函数注入自定义 CSS 样式。我们可以利用这一点来隐藏侧边栏。

以下是一个用于隐藏侧边栏的 CSS 代码：

div[data-testid="stSidebarCollapsedControl"]{
    display: none;
}
section[data-testid="stSidebar"][aria-expanded="true"]{
    display: none;
}

登录后复制

这段 CSS 代码通过选择器 data-testid 定位到侧边栏的收起按钮和侧边栏本身，并将它们的 display 属性设置为 none，从而隐藏它们。

创建自定义函数

为了方便在多个页面中使用，我们可以将上述 CSS 代码封装到一个自定义函数中：

import streamlit as st

def hide_sidebar():
    st.markdown("""
    <style>
        div[data-testid="stSidebarCollapsedControl"]{
            display: none;
        }
        section[data-testid="stSidebar"][aria-expanded="true"]{
            display: none;
        }
    </style>
    """, unsafe_allow_html=True)

登录后复制

这个 hide_sidebar 函数使用 st.markdown 将 CSS 代码注入到页面中。unsafe_allow_html=True 参数是必要的，因为它允许我们注入 HTML 和 CSS 代码。

面多多

面试鸭推出的AI面试训练平台

查看详情

在页面中使用

现在，我们可以在需要隐藏侧边栏的页面中调用 hide_sidebar 函数。例如，假设我们有一个名为 home.py 的页面，我们可以这样修改它：

import streamlit as st

def home():
    hide_sidebar()
    st.title("Home Page")
    st.write("Welcome to the home page!")

def hide_sidebar():
    st.markdown("""
    <style>
        div[data-testid="stSidebarCollapsedControl"]{
            display: none;
        }
        section[data-testid="stSidebar"][aria-expanded="true"]{
            display: none;
        }
    </style>
    """, unsafe_allow_html=True)

if __name__ == "__main__":
    home()

登录后复制

通过在 home() 函数的第一行调用 hide_sidebar()，我们就可以在该页面隐藏侧边栏。

替代方案：直接复制 CSS 代码

如果不希望使用自定义函数，也可以直接将 CSS 代码复制到每个需要隐藏侧边栏的页面中：

import streamlit as st

def about():
    st.markdown("""
    <style>
        div[data-testid="stSidebarCollapsedControl"]{
            display: none;
        }
        section[data-testid="stSidebar"][aria-expanded="true"]{
            display: none;
        }
    </style>
    """, unsafe_allow_html=True)
    st.title("About Page")
    st.write("This is the about page.")

if __name__ == "__main__":
    about()

登录后复制

虽然这种方法比较繁琐，但它避免了定义额外函数的需要。