文本与标题#

媒体与数据#

输入类#

布局与聊天（实战常用）#

一、知识回顾（读完直接做下面的实践题）#

1. 安装：pip install streamlit；运行：streamlit run xxx.py
2. 为什么不能像普通脚本那样用 python xxx.py 启动？因为它是 Web 应用，要由 streamlit 起服务
3. 页面配置：st.set_page_config(page_title=..., page_icon=..., layout="wide", initial_sidebar_state="expanded")
4. 标题三件套：st.title() / st.header() / st.subheader()
5. 文本输出：st.write()（支持 Markdown）、st.text()（纯文本）、st.divider()（分隔线）
6. 媒体组件：st.image() / st.audio()（音频）/ st.video()（视频）/ st.logo()（Logo）
7. 表格：st.table(数据字典)
8. 输入组件：st.text_input()（单行文本）、st.text_area()（多行文本）、st.text_input()（密码框，加 type="password"）、st.radio()（单选框）
9. 关键机制：用户每做一次交互，整个脚本会从头重新执行一遍

二、裸写题#

• 2-1 做一个展示页 页面包含：大标题、一级标题、一段文字、分隔线、一个表格（三人三列，含总分行）。运行后能正常看到页面。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：从大到小摆：标题 → 文字 → 分隔 → 表格 二级 · 方法：st.title / st.header / st.write / st.divider / st.table 三级 · 骨架：表格数据用字典表示，键是列名、值是列表

  参考答案（做完再点开）

  1
  import streamlit as st
  2
  
  3
  st.title("我的展示页")
  4
  st.header("一、成绩表格")
  5
  st.write("下面是一个成绩表格，最后一列是总分。")
  6
  st.divider()
  7
  
  8
  data = {
  9
      "姓名": ["王林", "李慕婉", "贝罗"],
  10
      "语文": [98, 90, 59],
  11
      "数学": [88, 78, 65],
  12
      "英语": [99, 89, 87],
  13
      "总分": [285, 257, 211],
  14
  }
  15
  st.table(data)

  显示更多显示更少

• 2-2 输入组件与回显 放三个输入组件（姓名、密码、性别单选），把用户输入的内容回显到页面上。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：每个组件都会”返回”用户输入的值，存进变量再显示 二级 · 方法：st.text_input（密码加 type="password"）、st.radio 三级 · 骨架：gender = st.radio("性别", ["男","女","未知"], index=____)

  参考答案（做完再点开）

  1
  import streamlit as st
  2
  
  3
  name = st.text_input("请输入姓名")
  4
  password = st.text_input("请输入密码", type="password")
  5
  gender = st.radio("请输入您的性别", ["男", "女", "未知"], index=2)
  6
  
  7
  st.divider()
  8
  st.write(f"您输入的姓名为: {name}")
  9
  st.write(f"您输入的密码为: {password}")
  10
  st.write(f"您的性别为: {gender}")

• 2-3 页面配置与媒体 给页面配置标题和图标、加 Logo，并放一张图片、一段音频、一段视频（用课程 resources 目录里的文件）。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：页面配置要放在所有组件之前；媒体组件直接给文件路径 二级 · 方法：st.set_page_config / st.logo / st.image / st.audio / st.video 三级 · 骨架：路径相对于运行命令时所在的目录，写错会报找不到文件

  参考答案（做完再点开）

  1
  import streamlit as st
  2
  
  3
  st.set_page_config(page_title="我的第一个页面", page_icon="🧊", layout="wide")
  4
  
  5
  st.title("页面配置与媒体演示")
  6
  st.logo("resources/logo.png")
  7
  
  8
  st.image("resources/cat.jpg")
  9
  st.audio("resources/news.mp3")
  10
  st.video("resources/news.mp4")