文章目录
streamlit是什么?
是一个python web框架，例如django。但是和django相比各有侧重点。
streamlit和django哪个好?
要看业务场景，传统python web项目，用django，成熟稳定。
大模型、数据分析等用streamlit，简单快速，无需前端知识，学习成本低。
自定义插件
1、创建python文件custom_app.py
python
import streamlit as st
import time
# 1. 初始化页面配置
st.set_page_config(page_title="Streamlit 自定义插件演示", layout="centered")
# 2. 初始化状态 (Session State)
# 如果 'is_big' 不在状态里，就默认为 False (小按钮)
if 'is_big' not in st.session_state:
st.session_state.is_big = False
# 3. 定义 CSS 样式 (这是核心"插件"部分)
# 我们利用 HTML 的 id 选择器来精准控制按钮样式
def inject_custom_css(is_big):
# 定义大按钮和小按钮的样式
if is_big:
# 变大：宽度 100%，高度 80px，字体变大
style = """
<style>
#my-custom-btn {
width: 100% !important;
height: 80px !important;
font-size: 24px !important;
background-color: #ff4b4b !important; /* 变红 */
transition: all 0.3s ease; /* 增加一点过渡动画 */
}
</style>
"""
else:
# 变小：宽度自动，高度默认，字体正常
style = """
<style>
#my-custom-btn {
width: auto !important;
height: 40px !important;
font-size: 16px !important;
background-color: #00ccff !important; /* 变蓝 */
transition: all 0.3s ease;
}
</style>
"""
# 将 CSS 注入到页面头部
st.markdown(style, unsafe_allow_html=True)
# --- 页面主逻辑 ---
st.title("🔘 按钮变大变小演示")
st.write("点击下方的按钮，观察它的变化。")
# 4. 注入当前的 CSS 样式
inject_custom_css(st.session_state.is_big)
# 5. 创建按钮
# key 参数非常重要，它决定了按钮的唯一标识
# 我们给它指定一个 id (通过 help 或 key 的某种方式，但这里我们主要靠 CSS 覆盖)
# 注意：Streamlit 原生按钮没有直接的 id 属性，我们需要用一种技巧来选中它
# 这里我们用一个简单的逻辑：如果是大状态，我们渲染一个全宽的按钮，否则渲染普通按钮
col1, col2 = st.columns([1, 1])
with col1:
# 这是一个逻辑按钮，点击它会改变状态
if st.button("🪄 切换状态 (逻辑控制)", use_container_width=False):
# 切换状态
st.session_state.is_big = not st.session_state.is_big
# 强制重跑（其实点击按钮本身就会重跑，这里是为了逻辑清晰）
st.rerun()
with col2:
# 这是一个视觉按钮 (我们要改变它的大小)
# 技巧：Streamlit 的 st.button 无法直接加 id，
# 所以我们用 st.markdown 模拟一个按钮，或者利用 st.form_submit_button 的 hack
# 但最简单的方法是：直接改变布局！
if st.session_state.is_big:
# 如果状态是"大"，我们就让按钮占满整行 (use_container_width=True)
if st.button("我是大按钮！(点击缩小)", use_container_width=True, key="visual-btn"):
st.session_state.is_big = False
st.rerun()
else:
# 如果状态是"小"，我们就让按钮只占内容宽度
if st.button("我是小按钮 (点击变大)", use_container_width=False, key="visual-btn"):
st.session_state.is_big = True
st.rerun()
# 6. 显示当前状态
st.write(f"当前状态：**{'巨大模式' if st.session_state.is_big else '普通模式'}**")2、终端输入命令运行：
python
streamlit run custom_app.py引入第三方插件
streamlit的项目结构
python
my_streamlit_app/ # 1. 根目录（手动新建文件夹）
├── .venv/ # 2. 虚拟环境（自动/手动生成，不要动里面的代码）
├── pages/ # 3. 【关键】多页面目录（必须叫这个名字！）
│ ├── 1_📊_数据看板.py # 文件名决定页面顺序和标题
│ └── 2_⚙️_设置.py
├── assets/ # 4. 静态资源（图片、CSS，手动新建）
├── utils/ # 5. 工具函数（封装 LMEval 逻辑，手动新建）
│ └── runner.py
├── data/ # 6. 存放评测结果 JSON 等临时数据
├── requirements.txt # 7. 依赖文件（手动生成：pip freeze > requirements.txt）
└── Home.py # 8. 主入口（手动新建，Streamlit 默认运行这个）其他
文档
streamlit官网文档：
https://docs.streamlit.io/
streamlit官网-原件库(从这里找元件)：
https://streamlit.io/components