ToB企服应用市场:ToB评测及商务社交产业平台

标题: 『玩转Streamlit』--页面结构 [打印本页]
作者: 美丽的神话    时间: 2024-10-31 07:56
标题: 『玩转Streamlit』--页面结构
一个优秀的数据应用不但仅是功能的强大，更在于其用户体验的打造。
而精良的页面结构，作为用户体验的紧张构成部分，不但能够提拔信息的可读性，还能引导用户高效地完成操作。
反之，混乱的结构会让人感到困惑和挫败，甚至导致用户放弃使用应用。
在Streamlit中，Sidebar（侧边栏）、Columns（列结构）和Tabs（标签页）是三个至关紧张的结构组件，它们各自有差别的使用场景，共同构成了应用界面的骨架。
1. 侧边栏 st.sidebar

Sidebar（侧边栏）在Streamlit应用中主要是导航作用。
Sidebar通常位于应用界面的左侧或右侧，它的优势在于，既不会占用主内容地区的空间，又同时保持了对关键功能的即时访问，特别适用于那些需要频繁切换功能或具有多层导航结构的应用。
Sidebar不是菜单，一般不用于页面的切换，它的里面可以包含其他的组件。
下面构建一个简化的数据分析场景，演示Sidebar的使用方法。
我们在Sidebar中设置需要选择的数据集和数据分类（分为测试集和验证集），
然后在主页面中获取选择的数据集和数据分类，只实现操作数据的功能。
  1. # 侧边栏中选择数据集
  2. dataset = st.sidebar.selectbox(
  3.     "选择数据集?",
  4.     (
  5.         "手写数字数据",
  6.         "房屋成交数据",
  7.         "股市交易数据",
  8.     ),
  9. )
  11. # 侧边栏中选择数据分类
  12. data_type = st.sidebar.radio(
  13.     "数据分类: ",
  14.     ("测试集", "验证集", "所有数据"),
  15. )
  17. # 右侧页面中的模拟操作
  18. st.title(f"数据集： {dataset}")
  19. st.divider()
  20. st.write(f"数据分类： 【{data_type}】")
  21. st.write(f"TODO！！！: 操作数据的功能")
复制代码

2. 列结构 st.columns

Columns结构，即列结构，是一种将页面内容分割成多个垂直排列的列，以便更有效地展示信息的结构方式。
这种结构方式不但提拔了页面的视觉吸引力，还明显增强了用户体验，使得信息获取更加直观和便捷。
在Streamlit中，可以使用st.columns函数来创建列结构。
这个函数接受一个列表作为参数，列表中的每个元素都是一个函数，代表一列的内容。
Streamlit会按照列表的顺序和长度来渲染列。
好比，我们构造一个数据分析的示例，分3列展示内容，
  1. # 绘图的类型放在session中
  2. if "graph" not in st.session_state:
  3.     st.session_state.graph = ""
  5. # 第一列
  6. def column_1():
  7.     st.header("1. 选择数据")
  8.     st.selectbox(
  9.         "选择数据集?",
  10.         (
  11.             "手写数字数据",
  12.             "房屋成交数据",
  13.             "股市交易数据",
  14.         ),
  15.     )
  16.     # 随机模拟的数据
  17.     data = pd.DataFrame(np.random.randn(5, 3), columns=["A", "B", "C"])
  18.     st.table(data)
  21. def column_2():
  22.     st.header("2. 配置数据")
  23.     graph = st.radio(
  24.         "图形类型: ",
  25.         ("折线图", "柱状图", "散点图"),
  26.     )
  28.     st.session_state.graph = graph
  31. def column_3():
  32.     st.header("3. 绘制图形")
  34.     chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["A", "B", "C"])
  35.     if st.session_state.graph == "散点图":
  36.         st.scatter_chart(chart_data)
  38.     if st.session_state.graph == "折线图":
  39.         st.line_chart(chart_data)
  41.     if st.session_state.graph == "柱状图":
  42.         st.bar_chart(chart_data)
  45. col1, col2, col3 = st.columns(3)
  47. with col1:
  48.     column_1()
  50. with col2:
  51.     column_2()
  53. with col3:
  54.     column_3()
复制代码

3. 标签页 st.tabs

Tabs组件的主要用途在于将复杂的信息结构分解为多个独立的、可切换的部分，每个部分（或称为“标签页”）都包含相关的内容或功能。
这种筹划方式有助于减少用户在同一时间内需要处理的信息量，制止界面过载，同时也便于用户快速找到所需内容。
同样是上面的例子，如果数据的字段许多，配置数据的项目也许多，那么上面的Columns结构就显得很拥挤，
这时，用Tabs结构更好，代码调整很简朴。
  1. tab1, tab2, tab3 = st.tabs(["1. 选择数据", "2. 配置数据", "3. 绘制图形"])
  3. with tab1:
  4.     tab_1()
  6. with tab2:
  7.     tab_2()
  9. with tab3:
  10.     tab_3()
复制代码
上面函数tab_1()，tab_2()，tab_3()中的代码和Columns结构示例中的column_1()，column_2()，column_3()代码根本一样。

随着Columns结构的每个Columns内容逐渐增多时，可以考虑改用Tabs结构。
4. 总结

总之，这三种结构方式各有千秋，选择哪种结构取决于应用的具体需求、用户习惯以及筹划目标。
Sidebar（侧边栏）提供持续可见的导航菜单，适合功能繁多或需频繁切换的应用，帮助用户快速定位所需功能，同时保持主内容地区的清晰。
Columns（列结构）则通太过割界面为多个并列地区，实现图文混排或数据报表的机动展示。
它进步了信息密度，使得用户能够在同一视图中获取更多信息，适用于需要同时展示多种数据类型或视图的场景。
Tabs（标签页）将内容分别为多个独立的、可切换的部分，每个部分包含相关功能或信息。
它有助于节省屏幕空间，同时帮助用户对信息举行逻辑分组，进步信息检索服从。
Tabs适用于功能或信息分类明确，且用户大概需要根据差别需求切换查看的应用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4