『玩转Streamlit』--布局与容器组件

富裕来袭

在Streamlit中，布局类组件扮演着至关重要的角色。
它们不仅决定了应用程序的视觉呈现和用户体验，也极大地增强了页面内容的组织性和可读性。
通过这些组件，开发者可以灵活地划分页面空间，创建出清晰、有条理的布局结构。
本篇主要介绍3种构建Streamlit App时常用的3种布局类组件：

• st.container：用于封装和组合多个组件，形成统一的视觉单元
  
• st.columns：将内容以并列的方式展示，提高信息展示的效率和效果
  
• st.expander：提供了可折叠的面板功能，使得额外信息可以在需要时展开查看，既节省了空间又保持了界面的整洁性
  

1. st.container

st.container通过将多个组件放入一个容器中，可以轻松地控制这些组件的布局和样式。
st.container本身并不直接提供布局参数，一般是通过with语句将要包含的组件放入容器中，
或者，通过嵌套使用其他布局组件（如st.column和st.row等）来在容器内部实现更复杂的布局。
1.1. 使用示例

假定这样一个场景，在一个数据分析应用中，需要同时展示数据表格和相关的文字说明。

1. import streamlit as st
2. import pandas as pd
4. # 创建示例数据
5. data = pd.DataFrame(
6.     {
7.         "A": [1, 2, 3],
8.         "B": [4, 5, 6],
9.         "C": [7, 8, 9],
10.     }
11. )
13. # 使用st.container封装数据表格和说明文字
14. with st.container():
15.     st.dataframe(data)
16.     st.markdown("这是数据表格的说明，提供了对数据的简要描述和分析。")

复制代码

或者在一个机器学习模型演示应用中，需要同时展示模型预测结果和交互式控件（如滑块），
也可以通过st.container，将预测结果和滑块控件组合在一起，形成一个交互式的界面

1. # 创建一个滑块控件
2. slider_value = st.slider("调整滑块以查看不同结果", 0, 100)
4. # 使用st.container封装预测结果和滑块控件
5. with st.container():
6.     st.write(f"当前滑块值为：{slider_value}")
7.     st.write("这是一个简单的机器学习模型演示。通过调整滑块，你可以看到不同的预测结果。")

复制代码

2. st.columns

st.columns组件用于创建一个列布局的容器，它可以将页面内容分割成多个垂直排列的列。
当需要在页面上同时展示多个并列的组件或信息块时，可以考虑使用st.columns。
st.columns参数很简单，它使用一个整数作为参数，该整数指定要创建的列数。
2.1. 使用示例

首先，模拟一个数据可视化应用中，需要并列展示一个折线图和相关的文字说明的场景。

1. import streamlit as st
2. import pandas as pd
3. import matplotlib.pyplot as plt
5. # 创建示例数据
6. data = pd.DataFrame(
7.     {
8.         "X": [1, 2, 3, 4, 5],
9.         "Y": [10, 15, 13, 17, 16],
10.     }
11. )
13. # 绘制折线图
14. plt.plot(data["X"], data["Y"])
15. plt.xlabel("X-Axis")
16. plt.ylabel("Y-Axis")
17. plt.title("chart example")
19. # 使用st.columns并列展示图表和文字说明
20. col1, col2 = st.columns(2)
21. col1.pyplot(plt)
22. col2.write("这是一个折线图示例，展示了X轴和Y轴之间的关系。")

复制代码

再模拟一个数据对比的应用，需要同时展示多个数据表格以便进行比较和分析。

1. # 创建示例数据
2. data1 = pd.DataFrame({"A": [1, 2, 3], "B": [4, 5, 6]})
4. data2 = pd.DataFrame({"A": [7, 8, 9], "B": [10, 11, 12]})
6. # 使用st.columns创建三列布局展示数据表格
7. col1, col2, col3 = st.columns(3)
8. col1.dataframe(data1)
9. col2.dataframe(data2)
10. col3.write("这是两个数据表格的对比展示。通过并列展示，你可以更方便地进行比较和分析。")

复制代码

3. st.expander

st.expander组件用于创建一个可折叠的面板，允许用户点击以展开或隐藏面板内的内容。
当需要在页面上提供额外的信息或选项，但又不希望这些信息始终可见时，可以考虑使用st.expander。
st.expander将一个字符串作为参数，该字符串将作为面板的标题显示。
然后，可以在with语句块内添加要在面板中显示的组件。
3.1. 使用示例

首先模拟一个数据分析的应用，其中包含一个详细设置的面板，但默认情况下这些设置是隐藏的。

1. import streamlit as st
3. # 创建一个包含详细设置的st.expander面板
4. with st.expander("详细设置"):
5.     st.write("这里是一些详细的设置选项，如数据过滤、排序等。")
6.     st.slider("数据过滤阈值", 0, 100)
7.     st.checkbox("启用排序功能")
9. # 主界面内容模拟
10. st.write("这是一个数据分析应用的主界面。你可以点击上面的“详细设置”来查看和修改设置。")

复制代码

此外，在一个比较复杂的Web应用中，如果需要提供一个包含帮助文档和指南的面板，以便用户在使用时参考。
那么，可以使用st.expander，将帮助文档和指南隐藏在一个可折叠的面板中，
用户可以在需要时查看这些信息，而不会影响主界面的展示效果。

1. with st.expander("帮助文档和指南"):
2.     st.markdown(
3.         """
4.     # 帮助文档和指南
6.     欢迎使用本应用！这里是一些常用的操作和技巧，帮助你更好地使用本应用。
8.     - **如何开始**：点击左侧导航栏中的“开始”按钮，进入应用主界面。
9.     - **数据导入**：在主界面上方点击“导入数据”按钮，上传你的数据文件。
10.     - **数据分析**：在数据导入后，点击“分析数据”按钮，选择你想要进行的分析类型。
12.     如有任何疑问，请联系技术支持。
13.     """
14.     )
16. # 主界面模拟
17. st.write("这是一个复杂的Web应用。如果你需要帮助或指南，请点击上面的“帮助文档和指南”。")

复制代码

4. 总结

这3个组件在布局时的侧重点不同，其中，st.container侧重组件封装，st.columns侧重列布局，而st.expander侧重信息隐藏。
我们在使用时根据应用的具体展现形式来选择，
比如，需要组织复杂布局时则用st.container，需要并列展示信息时用st.columns，需要隐藏额外信息时用st.expander。

来源:https://www.cnblogs.com/wang_yb/p/18564468
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！