本文介绍了如何在 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("""
""", unsafe_allow_html=True)这个 hide_sidebar 函数使用 st.markdown 将 CSS 代码注入到页面中。unsafe_allow_html=True 参数是必要的，因为它允许我们注入 HTML 和 CSS 代码。
在页面中使用
现在，我们可以在需要隐藏侧边栏的页面中调用 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("""
""", unsafe_allow_html=True)
if __name__ == "__main__":
home()通过在 home() 函数的第一行调用 hide_sidebar()，我们就可以在该页面隐藏侧边栏。
替代方案：直接复制 CSS 代码
如果不希望使用自定义函数，也可以直接将 CSS 代码复制到每个需要隐藏侧边栏的页面中：
import streamlit as st
def about():
st.markdown("""
""", unsafe_allow_html=True)
st.title("About Page")
st.write("This is the about page.")
if __name__ == "__main__":
about()虽然这种方法比较繁琐，但它避免了定义额外函数的需要。
注意事项
- 确保 unsafe_allow_html=True 参数被设置为 True，否则 Streamlit 将不会渲染 CSS 代码。
- CSS 代码会影响整个页面的样式。如果你只想影响特定区域，需要更精确的 CSS 选择器。
- 这种方法通过隐藏侧边栏元素来实现隐藏效果，但侧边栏仍然存在于 DOM 结构中。
总结
通过使用自定义 CSS 样式，我们可以轻松地在 Streamlit 多页面应用中隐藏侧边栏。可以选择创建自定义函数来重用代码，或者直接在每个页面中复制 CSS 代码。根据项目的具体需求和个人偏好选择最适合的方法。 这种方法可以有效地控制侧边栏的显示与隐藏，从而优化用户体验。
