如何在 Streamlit 多页面应用中隐藏侧边栏页面？

本教程旨在解决 Streamlit 多页面应用中，点击特定页面时隐藏侧边栏的需求。通过自定义 CSS 样式，我们提供了一种简单有效的方法，允许开发者控制侧边栏在不同页面上的显示与隐藏，从而优化用户体验，使应用界面更加简洁。本文将详细介绍实现步骤，并提供示例代码，帮助你轻松实现此功能。

Streamlit 是一款强大的 Python 库，可以快速构建交互式 Web 应用。在开发多页面应用时，侧边栏通常用于导航。然而，在某些场景下，我们可能希望在特定页面隐藏侧边栏，例如，当页面内容本身已经提供了足够的导航信息，或者为了简化界面。

实现方法

隐藏侧边栏的核心思路是利用 Streamlit 的 st.markdown 函数，注入自定义 CSS 样式。通过修改 CSS 属性，我们可以控制侧边栏的显示与隐藏。

具体步骤如下：

1. 创建隐藏侧边栏的函数：

   定义一个名为 hide_sidebar 的函数，该函数使用 st.markdown 注入 CSS 代码。这段 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)

   代码解释：

   • div[data-testid="stSidebarCollapsedControl"]: 选择器用于定位侧边栏的折叠按钮。
   • section[data-testid="stSidebar"][aria-expanded="true"]: 选择器用于定位展开状态下的侧边栏。
   • display: none;: CSS 属性，用于隐藏选定的元素。
   • unsafe_allow_html=True: 允许 st.markdown 执行 HTML 代码。

2. 在需要隐藏侧边栏的页面中调用函数：

   在每个你希望隐藏侧边栏的页面的入口函数（通常命名为 main 或 app）的第一行调用 hide_sidebar() 函数。

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

   示例：

   假设你有一个名为 home.py 的页面，你想在这个页面隐藏侧边栏。你只需要在 home 函数的第一行调用 hide_sidebar()。

完整示例

为了更清晰地展示如何应用此方法，下面提供一个完整的 Streamlit 多页面应用示例：

AItools.fyi

找到让生活变得更轻松的最佳AI工具！

下载

• main.py (主程序):

  import streamlit as st
  
  def main():
      page = st.sidebar.radio("Navigation", ["Home", "About"])
  
      if page == "Home":
          import home
          home.app()
      elif page == "About":
          import about
          about.app()
  
  if __name__ == "__main__":
      main()

• home.py (Home 页面):

  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)
  
  def app():
      hide_sidebar()
      st.title("Home Page")
      st.write("Welcome to the home page!")
  
  if __name__ == "__main__":
      app()

• about.py (About 页面):

  import streamlit as st
  
  def app():
      st.title("About Page")
      st.write("This is the about page.")
  
  if __name__ == "__main__":
      app()

  在这个示例中，只有 home.py 页面会隐藏侧边栏，而 about.py 页面会显示侧边栏。

注意事项

• unsafe_allow_html=True 的安全性：

  虽然 unsafe_allow_html=True 允许执行 HTML 代码，但在使用时需要谨慎，确保你信任你注入的 HTML 代码，以避免潜在的安全风险。 在本例中，由于CSS代码是开发者自己编写，所以风险较低。

• CSS 选择器的兼容性：

  Streamlit 的 HTML 结构可能会在未来版本中发生变化，导致 CSS 选择器失效。建议定期检查和更新 CSS 选择器，以确保代码的兼容性。

• 代码复用：

  如果你需要在多个页面隐藏侧边栏，可以将 hide_sidebar 函数放在一个公共模块中，并在各个页面中导入和调用该函数，以避免代码重复。

总结

通过使用 st.markdown 注入自定义 CSS 样式，我们可以轻松地控制 Streamlit 多页面应用中侧边栏的显示与隐藏。这种方法简单有效，可以帮助你优化用户体验，使应用界面更加简洁。记住要关注 CSS 选择器的兼容性，并谨慎使用 unsafe_allow_html=True。 通过掌握这些技巧，你可以更灵活地构建 Streamlit 应用，满足各种设计需求。