streamlit基础及常用的组建

最近看项目的过程中，发现一个印度老哥用 Python 写了快速可验证的前后端一体的项目

不需要使用模板语言，也不需要写接口、写前端页面，总之就是不需要和前端的 HTML、JS 这些打交道了，效率很高啊。

因此准备学习一下，方便在后续的项目中快速输出 demo。

所有的可供调用的元素，可以看官方的文档：

Streamlit 官方文档

从日常使用的角度而言，最关键的无非就是文本输入、文件上传、按钮点击的传递获取，还有基础的标题、文字、图片、列表、视频的展示。本文简单总结了一些常用的组件，方便自己日后回顾及使用。

1. 文本输入

Streamlit 提供了 st.text_input 方法，可以轻松实现文本输入。

user_input = st.text_input("请输入文本：")
if user_input:
    st.write(user_input)

2. 文件上传

文件上传通过 st.file_uploader 实现，可以支持多种格式的文件上传。

upload_file=st.file_uploader("上传文件",type=["png", "jpg","jpeg"])
if upload_file:
    st.write("您上传的图片如下:")
    image = Image.open(upload_file)
    st.image(image, use_container_width=True)

3. 按钮点击

通过 st.button 创建按钮，并在按钮点击后执行相应的操作。

if st.button("按钮"):
    st.write("按钮已被点击！")

4. 标题及文本

Streamlit 提供了多种展示标题和文本的方法：

• 标题：st.title、st.header、st.subheader

• 普通文本：st.text、st.write

st.title("这是主标题")
st.header("这是二级标题")
st.subheader("这是三级标题")
st.text("这是普通文本")
st.write("也可以直接写任意内容")

5. 图片

使用 st.image 加载本地或网络图片。

image = Image.open("example.jpg")
st.image(image, caption="示例图片", use_container_width=True)

6. 视频

通过 st.video 轻松加载本地或网络视频。

st.video("https://www.example.com/video.mp4")
st.video("path/to/your/video.mp4")

7. 列表

可以通过 st.write 显示简单的列表，或使用 pandas DataFrame 展示结构化数据。

# 表格
data = {
    "名称": ["苹果", "香蕉", "橙子"],
    "数量": [10, 20, 15]
}
df = pd.DataFrame(data)  # 转为 DataFrame
st.table(df)

大概掌握了上述的这几种元素之后，写一个简单的demo页面，基本上就是很简单的了。

完整的demo

import streamlit as st
from PIL import Image
import pandas as pd

# Streamlit 的核心机制是通过代码的重新运行实现动态界面更新和交互。Streamlit 会在每次用户操作（如点击按钮、调整滑块）时重新运行脚本，因此你无需手动刷新界面。

# 文本输入
user_input = st.text_input("请输入文本：")
if user_input:
    st.write(user_input)

# 文件上传
upload_file = st.file_uploader("上传文件", type=["png", "jpg", "jpeg"])
if upload_file:
    st.write("您上传的图片如下:")
    image = Image.open(upload_file)
    st.image(image, use_container_width=True)

# 按钮
if st.button("按钮"):
    st.write("按钮已被点击！")

# 标题及文本
st.title("这是主标题")
st.header("这是二级标题")
st.subheader("这是三级标题")
st.text("这是普通文本")
st.write("也可以直接写任意内容")

# 表格
data = {
    "名称": ["苹果", "香蕉", "橙子"],
    "数量": [10, 20, 15]
}
df = pd.DataFrame(data)  # 转为 DataFrame
st.table(df)