Streamlit入门 | XXL的小屋

一、超易上手的网站框架

对于想做网站却被前后端技术劝退的人来说，Streamlit 是一个理想选择。它能让你用纯 Python 代码在几分钟内搭建出可分享的网站，无需前端经验，甚至支持免费部署，堪称 “一站式网站解决方案”。

1、Streamlit 的核心优势

简单易上手：全程使用 Python 编写，无需学习 HTML、CSS、JavaScript 等前端技术。
快速开发：几行代码即可实现基础网站功能，官方宣称 “几分钟内将 Python 脚本转为网站”。
功能强大：支持文本、表格、图表、交互组件（按钮、输入框等），满足数据展示、工具类网站需求。
便于分享：支持免费部署，生成可公开访问的链接，让他人轻松使用你的网站。
一站式解决方案：集 “后端逻辑 + 前端展示 + 简易部署” 于一体，无需额外配置服务器或框架。

2、入门步骤：安装与测试

2.1. 安装 Streamlit

在项目文件夹的终端中执行以下命令：

pip install streamlit

2.2. 验证安装

安装完成后，通过官方示例测试是否可用：

streamlit hello

若成功，浏览器会自动打开一个本地网站（地址以localhost开头），展示 Streamlit 的功能示例。
示例包含交互演示（如数据可视化、机器学习模型展示），可通过侧边栏切换不同页面。

2.3. 终止服务器

若需停止网站运行，在终端按Ctrl+C即可终止 Streamlit 服务器，此时刷新网页会显示 “无法访问”。

3、适用场景

快速搭建数据可视化工具（如 CSV 分析器、图表生成器）；
开发 AI 交互应用（如简易 ChatGPT、问答工具）；
制作个人作品集、项目演示网站；
开发内部工具（如数据报表系统、流程简化工具）。

二、网站上添加文本图片表格

Streamlit 通过简单的 Python 代码即可在网页上展示文本、图片、表格等内容，且支持实时更新。以下是常用组件的使用方法，帮助你快速上手：

1、基础准备

新建文件：创建一个 Python 文件（如page1.py），导入 Streamlit 并简写为st：
python
```
import streamlit as st
```
1
运行网页：在终端执行以下命令，启动本地服务器（默认地址：http://localhost:8501）：
sh
```
streamlit run page1.py
```
1
实时更新：网页右上角点击 “Always rerun”，保存代码后自动刷新页面，无需手动重启。

2、文本与格式展示

2.1. 基本文本输出

使用st.write()函数展示文本，支持直接输出变量：

python

# 输出字符串
st.write("早上好！")

# 输出变量
a = 100
st.write(a)  # 网页显示：100

# 输出列表/字典
st.write([1, 2, 3])  # 列表
st.write({"姓名": "小明", "年龄": 18})  # 字典

简化写法：直接写变量或字符串，Streamlit 会自动调用st.write()：
python
```
"这行文本会自动显示"  # 等价于 st.write("这行文本会自动显示")
```
1

2.2. 标题与 Markdown

st.title()：大标题（最醒目）

支持 Markdown 语法（如标题、加粗、列表）：

python

st.title("📚 我的第一个Streamlit网页")  # 标题+emoji
st.write("## 二级标题")  # Markdown二级标题
st.write("**加粗文本**")  # 加粗

3、图片展示

使用st.image()函数展示本地图片，需指定图片路径：

python

# 展示图片（width参数设置宽度）
st.image("./头像.png", width=300)  # 假设图片与代码同目录

4、表格数据展示

Streamlit 对数据科学友好，可快速展示pandas.DataFrame（表格数据）。

4.1. 安装 pandas

pip install pandas

4.2. 展示交互式表格

使用st.dataframe()，支持排序、搜索、下载等交互功能：

python

import pandas as pd

# 创建表格数据
data = {
    "学号": [101, 102, 103],
    "班级": ["一班", "二班", "一班"],
    "成绩": [90, 85, 95]
}
df = pd.DataFrame(data)

# 展示交互式表格
st.dataframe(df)

4.3. 展示静态表格

使用st.table()，无交互功能，仅用于展示：

python

st.table(df)  # 静态表格，不可排序/搜索

5、分隔线

用st.divider()添加分隔线，区分不同内容块：

python

st.write("第一部分内容")
st.divider()  # 分隔线
st.write("第二部分内容")

6、核心优势

零前端知识：全程用 Python 实现，无需 HTML/CSS。
实时反馈：保存代码后自动更新网页，调试高效。
功能丰富：一行代码实现表格交互、图片展示等复杂功能。

三、网站上添加输入组件

Streamlit 提供了丰富的输入组件，可轻松实现文本输入、数字选择、勾选框、按钮等交互功能。这些组件能实时响应用户操作，并触发代码重新运行以更新页面内容。以下是常用输入组件的使用方法：

1、文本输入组件

1.1. 单行文本输入（`st.text_input`）

用于接收短文本（如姓名、邮箱），返回用户输入的字符串：

python

import streamlit as st

# 文本输入框（标签为“请输入你的名字”）
name = st.text_input("请输入你的名字")

# 当用户输入内容后，显示问候语
if name:
    st.write(f"你好，{name}！")

特性：用户输入后按回车，变量name会更新，页面自动刷新。

1.2. 密码输入（`st.text_input`+`type="password"`）

隐藏输入内容，适合用于密码、密钥等敏感信息：

python

# 密码输入框（输入内容默认隐藏）
password = st.text_input("请输入密码", type="password")

if password:
    st.write("密码已输入（为保护隐私不显示内容）")

1.3. 多行文本输入（`st.text_area`）

用于接收长文本（如备注、问题描述）：

python

# 多行文本框（可手动调整高度）
feedback = st.text_area("请输入你的反馈")

if feedback:
    st.write("你的反馈：")
    st.write(feedback)

2、数字输入组件（`st.number_input`）

用于接收数字，支持限制范围、步长等参数：

python

# 数字输入框（标签为“请输入你的年龄”）
age = st.number_input(
    "请输入你的年龄",
    value=20,  # 默认值
    min_value=0,  # 最小值
    max_value=120,  # 最大值
    step=1  # 增减步长
)

st.write(f"你的年龄是：{age}")

特性：用户可通过输入框直接输入数字，或点击加减号 / 减号调整，超出范围会提示错误。

3、勾选框（`st.checkbox`）

返回 / 勾选状态，返回布尔值（True/False）：

python

# 勾选框（标签为“同意条款”）
agree = st.checkbox("同意以上条款")

# 勾选后显示确认信息
if agree:
    st.write("你已同意条款")

4、按钮（`st.button`）

点击后触发动作，返回布尔值（True表示已点击）：

python

# 按钮（显示“提交”）
submit = st.button("提交")

# 点击后显示成功信息
if submit:
    st.write("提交成功！")

5、Streamlit 的运行机制

当用户与组件交互（如输入文本、点击按钮）或修改代码并保存时，Streamlit 会重新运行整个 Python 脚本，更新变量值并刷新页面。这一机制确保页面内容始终与用户操作同步。

6、总结

Streamlit 的输入组件简单易用，无需复杂逻辑即可实现交互功能：

文本输入：st.text_input（单行）、st.text_area（多行）
数字输入：st.number_input（支持范围和步长）
状态选择：st.checkbox（勾选 / 未勾选）
动作触发：st.button（点击后执行操作）

这些组件为构建交互式工具（如表单、数据分析界面）提供了基础。

四、网站上添加更多输入组件

除了基础输入组件，Streamlit 还提供了单选按钮、下拉框、滑块、文件上传器等丰富组件，支持更灵活的用户输入。以下是这些组件的具体用法：

1、单选组件

1.1. 单选按钮（`st.radio`）

用于从多个选项中选择唯一答案（如性别、学历）：

python

import streamlit as st

# 单选按钮：选择性别
gender = st.radio(
    "你的性别是？",  # 提示文本
    ["男", "女", "保密"],  # 选项列表
    index=0  # 默认选中第1个选项（索引从0开始）
)

st.write(f"你选择了：{gender}")

特性：默认选中第一个选项，可通过index修改默认值；若无需默认选项，设index=None。

1.2. 单选下拉框（`st.selectbox`）

节省空间的单选组件，适合选项较多的场景（如下拉菜单选择城市）：

python

# 单选下拉框：选择联系方式
contact = st.selectbox(
    "你希望通过什么方式联系？",  # 提示文本
    ["电话", "邮件", "微信", "QQ", "其它"]  # 选项列表
)

st.write(f"好的，我们会通过{contact}联系你")

特性：用户点击下拉箭头选择选项，返回选中的单个值。

2、多选组件（`st.multiselect`）

允许用户选择多个选项，返回包含所有选中值的列表（如选择兴趣爱好）：

python

# 多选下拉框：选择喜欢的水果
fruits = st.multiselect(
    "你喜欢的水果是什么？",  # 提示文本
    ["苹果", "香蕉", "橙子", "梨", "西瓜", "葡萄", "其它"]  # 选项列表
)

if fruits:  # 若有选择，展示结果
    st.write("你选择的水果是：")
    for fruit in fruits:
        st.write(f"- {fruit}")

3、滑块组件（`st.slider`）

通过拖动选择数字，适合需要直观调整数值的场景（如年龄、评分）：

python

# 滑块：选择年龄
age = st.slider(
    "请选择你的年龄",  # 提示文本
    min_value=0,  # 最小值
    max_value=120,  # 最大值
    value=25,  # 默认值
    step=1  # 拖动步长（每次增减1）
)

st.write(f"你选择的年龄是：{age}")

扩展：支持浮点型数值（如step=0.5），或范围选择（value=(18, 30)返回元组）。

4、文件上传器（`st.file_uploader`）

接收用户上传的文件（如图片、文档、CSV），支持限制文件格式：

python

# 文件上传器：仅允许上传Python文件（.py）
uploaded_file = st.file_uploader(
    "上传你的Python代码文件",  # 提示文本
    type=["py"]  # 允许的文件格式（可传入多个，如["png", "jpg"]）
)

if uploaded_file:  # 若有文件上传
    st.write(f"文件名：{uploaded_file.name}")  # 展示文件名
    # 读取文件内容（文本文件适用）
    content = uploaded_file.read()
    st.text("文件内容：")
    st.code(content.decode("utf-8", errors="ignore"))  # 以代码格式展示

说明：uploaded_file是文件对象，包含name（文件名）、read()（读取内容）等方法；非文本文件（如图片）需用对应库处理（如PIL处理图片）。

5、组件的共性与使用技巧

返回值类型：根据组件功能不同，返回值可能是字符串（单选）、列表（多选）、数字（滑块）或文件对象（上传器）。
实时更新：用户操作后，Streamlit 会重新运行脚本，变量值自动更新，页面同步刷新。
条件展示：结合if语句，可在用户输入后展示对应内容（如 “选择后才显示结果”）。

五、调整网站布局和增加容器

Streamlit 不仅支持基础组件，还提供了丰富的布局工具，可实现侧边栏、多列展示、选项卡切换、折叠展开等复杂布局，让网页更美观、交互更友好。以下是具体实现方法：

侧边栏适合放置次要信息（如设置、辅助输入），不占用主页面空间，且可折叠。

实现方式

使用with st.sidebar:语句，缩进部分的内容会显示在侧边栏：

python

import streamlit as st

# 侧边栏内容
with st.sidebar:
    st.write("### 侧边栏输入")
    name = st.text_input("请输入你的名字")
    if name:
        st.write(f"你好，{name}！")

# 主页面内容
st.write("### 主页面内容")
st.write("这里是主要展示区域")

效果

侧边栏默认显示在页面左侧，可通过点击箭头折叠 / 展开。
侧边栏中的组件功能与主页面一致（如输入、交互等）。

2、多列布局（Columns）

通过多列布局可将内容横向分割，适合对比展示或分类排列组件。

实现方式

使用st.columns(n)创建n个列，返回列对象列表；
通过with 列对象:语句，在对应列中添加内容。

python

column1, column2, column3 = st.columns([1, 2, 3])
with column1:
    password = st.text_input("请输入你的密码：", type="password")

with column2:
    paragraph = st.text_area("请输入一段自我介绍：")

with column3:
    age = st.number_input("请输入你的年龄：", value=20, min_value=0, max_value=150, step=1)
    st.write(f"你的年龄是：{age}岁")

说明

若传入整数st.columns(3)，则列宽均分；
传入列表st.columns([1, 2, 3])可自定义宽度比例（数值越大，占比越宽）。

3、选项卡（Tabs）

选项卡允许用户通过切换标签页查看不同内容，适合分类展示（如 “基本信息”“详细数据”）。

实现方式

使用st.tabs(标签列表)创建选项卡，返回标签对象列表；
通过with 标签对象:语句，在对应标签页中添加内容。

python

tab1, tab2, tab3 = st.tabs(["性别", "联系方式", "喜好水果"])
with tab1:
    gender = st.radio("你的性别是什么？", ["男性", "女性", "跨性别"], index=None)
    if gender:
        st.write(f"你选择的性别是{gender}")

with tab2:
    contact = st.selectbox("你希望通过什么方式联系？",
                 ["电话", "邮件", "微信", "QQ", "其它"])
    st.write(f"好的，我们会通过{contact}联系你")

with tab3:
    fruits = st.multiselect("你喜欢的水果是什么？",
                   ["苹果", "香蕉", "橙子", "梨", "西瓜", "葡萄", "其它"])
    for fruit in fruits:
        st.write(f"你选择的水果是{fruit}")

特性

切换选项卡时，已输入的内容会保留（变量值不丢失）；
适合内容较多但可分类的场景，减少页面滚动。

4、折叠展开组件（Expander）

折叠组件允许用户自主选择是否查看详情，避免页面信息过载。

实现方式

使用with st.expander(标题):语句，缩进部分的内容默认折叠，点击可展开。

python

with st.expander("身高信息"):
    height = st.slider("你的身高是多少厘米？", value=170, min_value=100, max_value=230, step=1)
    st.write(f"你的身高是{height}厘米")

适用场景

展示次要信息（如 “备注”“高级设置”）；
隐藏冗长内容（如 “数据来源说明”“详细日志”）。

六、管理用户会话状态

在 Streamlit 中，用户与组件交互（如点击按钮）会触发整个脚本重新运行，导致普通变量被重置。通过会话状态（Session State） 可保存变量值，确保在多次运行中保留数据。以下是具体原理与实现：

1、问题场景：变量被重置的困境

python

import streamlit as st

# 初始值设为0
a = 0

# 点击按钮后a加1
if st.button("加1"):
    a += 1

# 展示a的值
st.write(f"当前值：{a}")

问题表现

首次点击按钮，a变为 1；
再次点击，a始终保持 1，无法继续增加。

原因

Streamlit 在用户点击按钮后会重新运行整个脚本，a被重新初始化为 0，加 1 后仍为 1。

2、解决方案：使用会话状态（Session State）

会话状态可在用户会话（浏览器标签页打开期间）中保存变量，即使脚本重新运行也不会丢失数据。

2.1. 会话状态的基本用法

通过st.session_state访问会话状态（字典形式）；
首次使用时初始化变量，后续直接更新。

2.2. 修复后的代码

python

import streamlit as st

# 初始化会话状态中的变量a（仅首次运行时执行）
if "a" not in st.session_state:
    st.session_state["a"] = 0  # 或 st.session_state.a = 0（属性式访问）

# 点击按钮后，更新会话状态中的a
clicked = st.button("加1")
if clicked:
    st.session_state["a"] += 1  # 或 st.session_state.a += 1

# 展示会话状态中的a的值
st.write(f"当前值：{st.session_state['a']}")
print(st.session_state)

2.3. 效果

每次点击按钮，a的值会持续增加（1→2→3...）；
变量值保存在会话状态中，不受脚本重新运行影响。

3、会话状态的核心特性

会话隔离：每个浏览器标签页是独立会话，会话状态不共享（如用户 A 和用户 B 的a值互不影响）。
生命周期：会话状态在浏览器标签页关闭后失效。
灵活访问：支持字典式（st.session_state["key"]）或属性式（st.session_state.key）访问。

4、适用场景

保存用户输入历史（如多次点击的累计值）；
保留页面切换时的临时数据（如选项卡间共享变量）；
实现复杂交互逻辑（如多步骤表单、游戏分数记录）。

通过会话状态，Streamlit 可突破 “脚本重新运行导致变量重置” 的限制，实现更复杂的交互功能。这是构建动态网页（如工具类应用、多步骤流程）的核心技术之一。

七、创建多页面网站

当 Streamlit 应用内容增多时，单页面难以承载，此时可通过多页面功能将内容拆分到不同页面，用户可通过侧边栏自由跳转。实现方式简单，无需复杂路由配置，以下是具体步骤：

1、多页面实现步骤

1.1. 项目结构调整

指定主页：选择一个 Python 文件作为网站主页（如app.py），直接放在项目根目录。
创建页面文件夹：在项目根目录新建名为pages的文件夹（必须小写且命名为 pages）。
存放子页面：将其他页面的 Python 文件（如page1.py、page2.py）全部放入pages文件夹。

示例结构：

markdown

my_streamlit_app/
├─ app.py  # 主页
└─ pages/
   ├─ page1.py  # 子页面1
   ├─ page2.py  # 子页面2
   └─ page3.py  # 子页面3

1.2. 运行多页面网站

在终端运行主页文件：

python

streamlit run app.py

2、多页面效果与特性

2.1. 页面跳转

运行后，侧边栏会自动显示所有页面的入口（以文件名作为标签）。
点击侧边栏的页面名称，即可切换到对应页面（如点击 “page1” 跳转到page1.py的内容）。

2.2. 会话状态共享

不同页面间可通过st.session_state共享变量（如用户输入、累计值等）。
只要不关闭浏览器标签页，会话状态会一直保留，跳转页面后数据不丢失。

2.3. 灵活性

可随时在pages文件夹中添加 / 删除子页面，无需修改配置，Streamlit 会自动识别。
主页与子页面的编写方式完全一致，支持所有 Streamlit 组件和布局。

3、优势

内容拆分：将庞大的应用按功能拆分，每个页面聚焦一个主题，提升用户体验。
简单易用：无需学习路由规则，仅通过文件夹结构即可实现多页面，对新手友好。
状态共享：通过会话状态实现页面间数据传递，满足复杂交互需求（如多步骤流程）。

通过这种方式，可轻松构建包含多个页面的 Streamlit 网站，适合内容较多的应用（如数据分析平台、多功能工具集等）。只需调整文件结构，即可实现页面管理与跳转，极大降低了多页面开发的门槛。

一、超易上手的网站框架 ​

1、Streamlit 的核心优势 ​

2、入门步骤：安装与测试 ​

2.1. 安装 Streamlit ​

2.2. 验证安装 ​

2.3. 终止服务器 ​

3、适用场景 ​

二、网站上添加文本 图片 表格 ​

1、基础准备 ​

2、文本与格式展示 ​

2.1. 基本文本输出 ​

2.2. 标题与 Markdown ​

3、图片展示 ​

4、表格数据展示 ​

4.1. 安装 pandas ​

4.2. 展示交互式表格 ​

4.3. 展示静态表格 ​

5、分隔线 ​

6、核心优势 ​

三、网站上添加输入组件 ​

1、文本输入组件 ​

1.1. 单行文本输入（st.text_input） ​

1.2. 密码输入（st.text_input+type="password"） ​

1.3. 多行文本输入（st.text_area） ​

2、数字输入组件（st.number_input） ​

3、勾选框（st.checkbox） ​

4、按钮（st.button） ​

5、Streamlit 的运行机制 ​

6、总结 ​

四、网站上添加更多输入组件 ​

1、单选组件 ​

1.1. 单选按钮（st.radio） ​

1.2. 单选下拉框（st.selectbox） ​

2、多选组件（st.multiselect） ​

3、滑块组件（st.slider） ​

4、文件上传器（st.file_uploader） ​

5、组件的共性与使用技巧 ​

五、调整网站布局和增加容器 ​

1、侧边栏（Sidebar） ​

实现方式 ​

效果 ​

2、多列布局（Columns） ​

实现方式 ​

说明 ​

3、选项卡（Tabs） ​

实现方式 ​

特性 ​

4、折叠展开组件（Expander） ​

实现方式 ​

适用场景 ​

六、管理用户会话状态 ​

1、问题场景：变量被重置的困境 ​

问题表现 ​

原因 ​

2、解决方案：使用会话状态（Session State） ​

2.1. 会话状态的基本用法 ​

2.2. 修复后的代码 ​

2.3. 效果 ​

3、会话状态的核心特性 ​

4、适用场景 ​

七、创建多页面网站 ​

1、多页面实现步骤 ​

1.1. 项目结构调整 ​

1.2. 运行多页面网站 ​

2、多页面效果与特性 ​

2.1. 页面跳转 ​

2.2. 会话状态共享 ​

2.3. 灵活性 ​

3、优势 ​

一、超易上手的网站框架

1、Streamlit 的核心优势

2、入门步骤：安装与测试

2.1. 安装 Streamlit

2.2. 验证安装

2.3. 终止服务器

3、适用场景

二、网站上添加文本图片表格

1、基础准备

2、文本与格式展示

2.1. 基本文本输出

2.2. 标题与 Markdown

3、图片展示

4、表格数据展示

4.1. 安装 pandas

4.2. 展示交互式表格

4.3. 展示静态表格

5、分隔线

6、核心优势

三、网站上添加输入组件

1、文本输入组件

1.1. 单行文本输入（`st.text_input`）

1.2. 密码输入（`st.text_input`+`type="password"`）

1.3. 多行文本输入（`st.text_area`）

2、数字输入组件（`st.number_input`）

3、勾选框（`st.checkbox`）

4、按钮（`st.button`）

5、Streamlit 的运行机制

6、总结

四、网站上添加更多输入组件

1、单选组件

1.1. 单选按钮（`st.radio`）

1.2. 单选下拉框（`st.selectbox`）

2、多选组件（`st.multiselect`）

3、滑块组件（`st.slider`）

4、文件上传器（`st.file_uploader`）

5、组件的共性与使用技巧

五、调整网站布局和增加容器

1、侧边栏（Sidebar）

实现方式

效果

2、多列布局（Columns）

实现方式

说明

3、选项卡（Tabs）

实现方式

特性

4、折叠展开组件（Expander）

实现方式

适用场景

六、管理用户会话状态

1、问题场景：变量被重置的困境

问题表现

原因

2、解决方案：使用会话状态（Session State）

2.1. 会话状态的基本用法

2.2. 修复后的代码

2.3. 效果

3、会话状态的核心特性

4、适用场景

七、创建多页面网站

1、多页面实现步骤

1.1. 项目结构调整

1.2. 运行多页面网站

2、多页面效果与特性

2.1. 页面跳转

2.2. 会话状态共享

2.3. 灵活性

3、优势