第2章: 常见组件与布局

掌握输入组件与页面布局，让你的应用真正“能用”

本章目标

学会最常见的输入组件：文本、数字、选择、滑块、复选、日期时间
掌握布局能力：列布局、容器、侧边栏、展开/折叠、Tab
理解“组件的值如何回传到 Python 变量”以及 key 的意义
能写出一个“侧边栏筛选 + 主区展示结果”的小工具页面

组件使用的共通规则

1) 每个输入组件都会返回一个值

你把组件返回值赋给变量，就能在后续逻辑里使用。例如：

name = st.text_input("姓名")
st.write("你输入的是：", name)

2) key：让组件拥有稳定身份

当页面上有多个同类型组件（或在循环里动态创建组件）时，建议显式写 key。
key 也决定了组件的值在 st.session_state 里对应哪个字段（第5章会深入）。

nickname = st.text_input("昵称", key="nickname")
st.write(st.session_state.get("nickname"))

⚠️ 常见坑： 同一页面里重复使用相同的 key，会触发 Streamlit 报错（DuplicateWidgetID）。

常见输入组件

文本与数字

import streamlit as st

st.title("输入组件")

name = st.text_input("你的名字", "同学")
password = st.text_input("密码", type="password")
age = st.number_input("年龄", min_value=0, max_value=120, value=18)

st.write("name=", name)
st.write("age=", age)

选择类组件

level = st.selectbox(
    "你对 Python 的熟悉程度？",
    ("完全零基础", "学过一点", "可以写小项目", "工作中经常用")
)

hobby = st.multiselect(
    "你对哪些方向感兴趣？",
    ["数据分析", "可视化", "Web应用", "自动化脚本", "AI/机器学习"]
)

choice = st.radio("你更喜欢哪种学习节奏？", ["每天 30 分钟", "周末集中", "碎片化"])

st.write("level=", level)
st.write("hobby=", hobby)
st.write("choice=", choice)

滑块、日期与文件

from datetime import date

hours = st.slider("今天学习时长（小时）", 0.0, 12.0, 1.0, 0.5)
day = st.date_input("日期", value=date.today())

st.write("hours=", hours)
st.write("day=", day)

uploaded = st.file_uploader("上传一个 CSV（可选）", type=["csv"])
if uploaded is not None:
    st.success("已选择文件：" + uploaded.name)

💡 小技巧： 选择类组件常用于“筛选条件”，而 slider 适合做范围、阈值、数量控制。

布局：从“堆组件”到“像个应用”

列布局：st.columns

最常用的布局方式：左边放输入，右边放输出。

col1, col2 = st.columns([1, 2])

with col1:
    st.subheader("筛选条件")
    city = st.selectbox("城市", ["北京", "上海", "广州", "深圳"])
    show_detail = st.checkbox("显示详情")

with col2:
    st.subheader("结果区")
    st.write("你选择的城市：", city)
    if show_detail:
        st.info("这里展示更多内容，比如表格/图表")

侧边栏：st.sidebar

把“控制面板”放到左侧，主区专注展示。

st.sidebar.title("控制面板")
keyword = st.sidebar.text_input("关键词")
limit = st.sidebar.slider("显示条数", 5, 50, 10)

st.write("keyword=", keyword)
st.write("limit=", limit)

容器：st.container / st.expander / st.tabs

with st.expander("展开查看高级选项"):
    threshold = st.slider("阈值", 0, 100, 60)
    st.write("threshold=", threshold)

t1, t2 = st.tabs(["表格", "图表"])
with t1:
    st.write("这里放表格")
with t2:
    st.write("这里放图表")

综合示例：侧边栏筛选的“学习计划生成器”

把本章组件与布局组合起来，做一个可交互的小工具：

import streamlit as st

st.title("学习计划生成器")

st.sidebar.header("计划参数")
days = st.sidebar.slider("计划天数", 3, 30, 7)
level = st.sidebar.selectbox("基础水平", ["零基础", "入门", "进阶"])
topic = st.sidebar.multiselect("学习方向", ["Python基础", "数据分析", "Streamlit", "爬虫", "AI/ML"])
hours = st.sidebar.slider("每天学习时长（小时）", 0.5, 6.0, 1.5, 0.5)

st.subheader("你的计划")

if not topic:
    st.warning("请至少选择一个学习方向")
else:
    st.write(f"计划天数：{days} 天")
    st.write(f"水平：{level}")
    st.write(f"每天学习：{hours} 小时")
    st.write("方向：", ", ".join(topic))

    total = days * hours
    st.success(f"预计总学习时长：{total:.1f} 小时")

    st.write("---")
    st.write("示例安排（你可以自行改成更复杂的生成规则）：")
    for d in range(1, days + 1):
        st.write(f"Day {d}: {topic[(d - 1) % len(topic)]}")

📝 章节练习

练习 1：输入组件全家桶

写一个页面，至少用到：text_input、number_input、selectbox、multiselect、slider
把所有输入汇总成一个“信息卡片”（主区展示）
思考：哪些组件适合放在 sidebar？

练习 2：两列布局的“筛选 + 结果”

左侧列放筛选项：城市、课程方向、是否只看已完成
右侧列展示筛选结果（可以用 st.write 模拟结果列表）
加一个 st.expander 放高级选项

本章小结

掌握了常见输入组件的用法与返回值规律
理解了 key 的作用（避免冲突、绑定状态）
掌握列布局、侧边栏、Tab/Expander 等组织方式
能够组合组件搭建一个简单可用的小工具页面