交互类组件在Web应用程序中至关重要，它们允许用户与应用进行实时互动，能够显著提升用户体验。
用户不再只是被动地接收信息，而是可以主动地输入数据、做出选择或触发事件，从而更加深入地参与到应用中来。
此外，对于某些复杂的任务或操作，交互类组件可以将其分解成一系列简单的步骤或选择，从而降低用户的认知负担和学习成本
。这使得用户能够更轻松地完成这些任务，提高应用的易用性。
Streamlit中交互类组件有很多，本篇介绍其中最常用的几种，这也是Web页面中最常见到的几种组件。
- st.text_input：允许用户输入文本，用于收集用户输入的字符串信息。
- st.button：提供一个可点击的按钮，用户点击后触发特定操作或事件。
- st.selectbox：显示下拉列表，让用户从预设选项中选择一个。
- st.multiselect：提供下拉多选功能，允许用户从预设选项中选择多个。
- st.radio：显示单选按钮组，让用户从多个选项中选择一个。
- st.checkbox：提供复选框，让用户选择或取消选择特定选项。
1. 组件概述
1.1. st.text_input
用于输入普通文本或者密码，类似于HTML中的<input type="text">。
核心的参数有：
| 名称 | 类型 | 说明 |
|---|---|---|
| label | str | 输入框前面的标签 |
| key | str | 唯一标识此输入框的键，可用于在回调中引用 |
| value | str | 输入框的初始值 |
| type | str | 输入类型，可以是"default"（默认）或者"password"（密码） |
1.2. st.button
提供一个按钮用来出发特定事件，类似于HTML中的<button>。
核心的参数有：
| 名称 | 类型 | 说明 |
|---|---|---|
| label | str | 按钮上的文字 |
| key | str | 唯一标识此按钮的键 |
| help | str | 按钮旁边的帮助文本 |
1.3. st.selectbox
下拉选择框，类似于HTML中的<select>。
核心的参数有：
| 名称 | 类型 | 说明 |
|---|---|---|
| label | str | 下拉框前面的标签 |
| key | str | 唯一标识此下拉框的键 |
| options | list | 下拉框中的选项列表 |
| index | int | 初始选中项的索引 |
1.4. st.multiselect
可以多选的下拉选择框，类似于HTML中的<select multiple>。
核心的参数有：
| 名称 | 类型 | 说明 |
|---|---|---|
| label | str | 多选框前面的标签 |
| key | str | 唯一标识此多选框的键 |
| options | list | 多选框中的选项列表 |
| default | list | 默认选中的选项列表 |
1.5. st.radio
单选按钮组，类似于HTML中的<input type="radio">。
核心的参数有：
| 名称 | 类型 | 说明 |
|---|---|---|
| label | str | 单选按钮组前面的标签 |
| key | str | 唯一标识此单选按钮组的键 |
| options | list | 单选按钮组中的选项列表 |
| index | int | 初始选中项的索引 |
1.6. st.checkbox
复选框，类似于HTML中的<input type="checkbox">。
核心的参数有：
| 名称 | 类型 | 说明 |
|---|---|---|
| label | str | 复选框旁边的标签 |
| key | str | 唯一标识此复选框的键 |
| value | bool | 复选框的初始状态（选中或未选中） |
2. 组件使用示例
下面通过从实际场景中简化而来的示例，来看看如何使用Streamlit的交互类组件。
2.1. "用户偏好调查"示例
这个示例模拟了一个真实的用户调查场景，
通过Streamlit的交互式组件，用户可以轻松地输入和选择信息，并提交给应用进行处理和显示。
import streamlit as st# 标题
st.title("用户偏好调查")# 文本输入框：收集用户名
username = st.text_input("请输入您的姓名：")# 下拉单选框：选择性别
gender = st.selectbox("请选择您的性别：", ["男", "女", "其他"])# 下拉多选框：选择兴趣爱好
hobbies = st.multiselect("请选择您的兴趣爱好：", ["阅读", "运动", "旅行", "音乐", "电影"]
)# 单选按钮组：选择喜欢的颜色
favorite_color = st.radio("请选择您喜欢的颜色：", ["红色", "蓝色", "绿色", "黄色"])# 复选框：是否同意接收推送
accept_push = st.checkbox("您是否同意接收推送消息？")# 按钮：提交调查
if st.button("提交调查"):# 收集所有输入信息并显示user_info = {"姓名": username,"性别": gender,"兴趣爱好": ", ".join(hobbies),"喜欢的颜色": favorite_color,"是否同意接收推送": "是" if accept_push else "否",}st.subheader("您的调查信息如下：")st.write(user_info)
2.2. "数据分析项目仪表板"示例
这个示例模拟了一个数据分析项目的仪表板，
通过Streamlit的交互式组件，用户可以轻松地与数据进行交互，选择他们感兴趣的分析方式，并查看和下载分析结果。
import streamlit as st
import pandas as pd
import numpy as np# 假设数据集
data = pd.DataFrame({"日期": pd.date_range(start="2023-01-01", periods=100, freq="D"),"类别": np.random.choice(["A", "B", "C"], 100),"销售额": np.random.randint(100, 1000, 100),"利润": np.random.randint(10, 100, 100),}
)# 标题
st.title("数据分析项目仪表板")# 文本输入框：输入项目名称
project_name = st.text_input("请输入项目名称：")# 下拉单选框：选择分析类别
analysis_category = st.selectbox("请选择分析类别：", data["类别"].unique())# 下拉多选框：选择显示的列
display_columns = st.multiselect("请选择要显示的列：", data.columns)
selected_data = data[display_columns]# 单选按钮组：选择汇总方式
agg = st.radio("请选择汇总方式：", ["总和", "平均值", "最大值", "最小值"])
agg_dict = {"总和": "sum","平均值": "mean","最大值": "max","最小值": "min",
}# 复选框：是否按类别汇总
group_by_category = st.checkbox("是否按类别汇总？")# 按钮：执行分析
if st.button("执行分析"):# 根据用户选择进行分析if group_by_category:grouped_data = (selected_data.groupby("类别").agg({col: agg_dict[agg] for col in selected_data.columns if col != "类别"}).reset_index())else:grouped_data = (selected_data.agg({col: agg_dict[agg] for col in selected_data.columns}).to_frame().T)# 显示分析结果st.subheader("分析结果：")st.dataframe(grouped_data)
3. 总结
总之，这些交互式组件使得用户可以通过文本输入、选择、勾选等方式与应用进行互动，从而根据用户需求动态地展示和分析数据。
它们极大地增强了应用的灵活性和用户体验，使得数据分析、数据可视化等任务变得更加直观和便捷。
