一、简介

Streamlit(https://docs.streamlit.io/)是一个基于tornado框架的快速搭建Web应用的Python库,封装了大量常用组件方法,支持大量数据表、图表等对象的渲染,支持网格化、响应式布局。简单来说,可以让不了解前端的人搭建网页。相比于同类产品PyWebIO,Streamlit的功能更加全面一些(https://docs.streamlit.io/develop/api-reference)。

  • 文本元素
  • 数据元素
  • 图标元素
  • 输入组件
  • 媒体元素
  • 布局和容器
  • 聊天元素
  • 状态元素
  • 三方组件

在这里插入图片描述

常用组件教程

1.1 安装

# 安装依赖
pip install streamlit

在这里插入图片描述

1.2 运行

app.python

# 导入模块
import streanlit as st
st.title('Hello World')

运行网页需要在终端中通过streamlit命令来运行 run 某个python文件,运行后会自动打开网页 http://localhost:8501

# 先切换到python文件所在的目录
D:\ > streamlit run xxx.py

在这里插入图片描述
在这里插入图片描述

二、API Reference

设置

页面元素默认居中显示。
页面图标可以通过这个网站复制:https://emoji6.com/

st.set_page_config(
	page_title="Streamlit入门"
	page_icon="♦️"
	#布局
	layout="wide"
	#控制的是侧边栏的状态
	initial_sidebar_state="expanded",
	# 在右上角 ... 中,不需要时可以设置为空 {}
	menu_items={
	'Get Help': "https://www.itcast.cn"
	"Repot a bug": "https://www.itcast.cn",
	"About": "# This is a header. This is an *extremely* cool app!"
	}
)	

logo

固定展示在页面的左上角。

st.logo("resources/logo.png")

标题 title

st.title("Hello World")

在这里插入图片描述

头 header & subheader

st.header("一级标题")
st.subheader("二级标题")

在这里插入图片描述

段落 write

st.write("Hello world")

在这里插入图片描述

写流 write_stream

Write generators or streams to the appwith a typewriter effect.

st.write_stream(my_generator)
st.write_stream(my_llm_stream)

图片 image & pdf

st.image("https://example.com/myimage.jpg")
st.image("resources/xxx.png", witdth=300)
st.pdf("my_document.pdf")

音频 audio

st.audio("resources/xxx.mp3")

视频 video

st.video("resources/xxx.mp4")

按钮 button

  • key:每个按钮都有一个key,如果没有指定key默认使用名字,button中的key必须唯一,如果不显式指定key,假如button中的名字可能会重复,会报错。
  • type:按钮类型,primary(红色)、secondary(默认)、tertiary
st.button("按钮")
st.button("按钮", width=300, icon="")
# stretch:铺满容器
st.button("按钮", width="stretch", icon="")
st.button("按钮", width="stretch", icon="", key="")

在这里插入图片描述

表格 table

import pandas as pd
import streamlit as st

student_data = {
"姓名":["王林""李慕婉”,"贝罗","莫厉海","石萧"]"学号":["20260001","20260002","20260003","20260004","20260005"],
"语文":[98,90,59,29,80],
"数学":[88,78,65,70,39],
"英语":[99,89,87,59,62],
"总分": [285, 257,211, 158, 181]
)

st.table(student_data)

文本输入框 text_input

username = st.text_input("请输入用户名", placehodler="请输入", value="xxx")
password = st.text_input("请输入密码", type="password")
name = st.text_input("姓名", "melong")
st.write("当前输入内容为", name)

在这里插入图片描述

文本域 textarea

paragraph = st.text_area("多行内容:")

数字输入框 number_input

import streamlit as st

age = st.number_input('年龄:')

st.write(f'你输入的年龄是{age}岁')

单选 radio

gender = st.radio("请选择性别", ["男", "女", "未知"])
gender = st.radio("请选择性别", ["男", "女", "未知"], index=2)

复选框 checkbox

checked = st.checkbox("同意以上条款")
if checked:
  st.write("同意")
else:
  st.write("不同意")

单选下拉框 selectbox

import streamlit as st

subject = st.selectbox(
  "意向学科",
  [
    "AI大模型开发",
    "AI智能应用开发",
    "AI嵌入式+机器人开发",
    "AI测试",
    "AI运维"
  ]
)

st.write(f"你喜欢{subject }")

多选下拉框 multiselect

import streamlit as st

subject_list = st.multiselect("意向学科",
  [
    "AI大模型开发",
    "AI智能应用开发",
    "AI嵌入式+机器人开发",
    "AI测试",
    "AI运维"
  ],
  placeholder="请选择意向学科"
)

for subject in subject_list :
  st.write(f"你喜欢{subject}")

滑块 slider

import streamlit as st

# 滑块
temperature = st.slider("模型温度", value=0.8, min_value=0.1, max_value=2.0, step=0.1)

st.write(f"你设定的模型温度是{temperature}")

markdown

st.markdown("Hello **World**")

在这里插入图片描述

分割线 divider

st.divider()

在这里插入图片描述

吐司 Toast

st.toast("吐司提示", icon="✅")

在这里插入图片描述

成功 success

st.success("操作成功")

在这里插入图片描述

错误 error

st.error("错误")

日期 datetime_input

import datetime
import streamlit as st

event_time = st.datetime_input(
    "生日",
    datetime.datetime(2026, 4, 26, 16, 45),
)
st.write("生日是:", event_time)

在这里插入图片描述
在这里插入图片描述

文件上传 file_uploader

import pandas as pd
import streamlit as st

files = st.file_uploader(
    "Upload files",
    accept_multiple_files=True,
    type=["csv", "xlsx"],
)

if files:
    for file in files:
        st.subheader(file.name)
        suffix = file.name.lower().rsplit(".", maxsplit=1)[-1]

        if suffix == "csv":
            df = pd.read_csv(file)
        else:
            df = pd.read_excel(file)

        st.dataframe(df, use_container_width=True)

在这里插入图片描述
在这里插入图片描述

图表 Chart



import pandas as pd
import streamlit as st
from numpy.random import default_rng as rng

df = pd.DataFrame(rng(0).standard_normal((20, 3)), columns=["a", "b", "c"])

st.bar_chart(df)

在这里插入图片描述

聊天输入框 chat_input

prompt = st.chat_input()
st.write(prompt)

在这里插入图片描述
输入你好
在这里插入图片描述

旋转器 spinner

加载中

import time
with st.spinner("思考中..."):
	time.sleep(1)

在这里插入图片描述

聊天消息 chat_message

st.chat_message("user").write(prompt)
st.chat_message("assistant").write_stream(prompt)

在这里插入图片描述

空 empty

import streamlit as st
import time

with st.empty():
    for seconds in range(10):
        st.write(f"⏳ {seconds} seconds have passed")
        time.sleep(1)
    st.write(":material/check: 10 seconds over!")
st.button("Rerun")

会话状态 session_state

当页面元素发生任何变化时,都会重新刷新页面,并且重新执行代码,也就是页面是无状态的。
当刷新后再想获取之前执行后的结果,需要借助会话状态,将执行后的结果保存到会话状态中。
当页面再刷新后可以从会话状态中获取原来执行的结果。
session_state 本身是一个对象,可以往这个对象中添加任意属性和取值。

	
if "message" not in st.session_state:
	st.session_state["message"] = []

st.session_state["message"].append({"role": "user", "content": "用户的提示词prompt"})
import streamlit as st

if "message" not in st.session_state:
    st.session_state["message"] = [{"role": "assistant", "content": "我是一个AI助手,有什么可以帮助您的?"}]

prompt = st.chat_input()
if prompt:
    st.session_state["message"].append({"role": "user", "content": prompt})

if st.session_state["message"]:
    for message in st.session_state["message"]:
        with st.chat_message(message["role"]):
            st.write(message["content"])

在这里插入图片描述

侧边栏 sidebar

import streamlit as st

with st.sidebar:
  search = st.text_input('搜索:')
  
  st.write(f'页面内容,看看搜索了啥:{search}')

多列布局 columns

import streamlit as st

col1, col2, col3 = st.columns(3)

with col1:
  st.write('第1列')

with col2:
  st.write('第2列')

with col3:
  st.write('第3列')


# 2列,4:1的宽度
col1, col2 = st.columns([4, 1])
with col1:
  st.button('按钮1')
with col2:
  st.button("删除", width="stretch", icon="X")


选项卡 tabs

import streamlit as st

# 选项卡
tab1, tab2, tab3 = st.tabs(['点赞', '关注', '收藏'])

with tab1:
  st.write('快点赞吧')
with tab2:
  st.write('关注一下啦')
with tab3:
  st.write('收藏就是学会了')

折叠展开组件 expander

重新运行 rerun

手动刷新页面

st.rerun()
Logo

这里是“一人公司”的成长家园。我们提供从产品曝光、技术变现到法律财税的全栈内容,并连接云服务、办公空间等稀缺资源,助你专注创造,无忧运营。

更多推荐