Streamlit:快速创建应用界面,无需了解 Web 开发

Streamlit 是一个用于快速创建数据应用程序的开源 Python 库。它的设计目标是让数据科学家能够轻松地将数据分析和机器学习模型转化为具有交互性的 Web 应用程序,而无需深入了解 Web 开发。和常规 Web 框架,如 Flask/Django 的不同之处在于,它不需要你去编写任何客户端代码(HTML/CSS/JS),只需要编写普通的 Python 模块,就可以在很短的时间内创建美观并具备高度交互性的界面,从而快速生成数据分析或者机器学习的结果;另一方面,和那些只能通过拖拽生成的工具也不同的是,你仍然具有对代码的完整控制权。


Streamlit 提供了一组简单而强大的基础模块,用于构建数据应用程序:

  • st.write():这是最基本的模块之一,用于在应用程序中呈现文本、图像、表格等内容。

  • st.title()、st.header()、st.subheader():这些模块用于添加标题、子标题和分组标题,以组织应用程序的布局。

  • st.text()、st.markdown():用于添加文本内容,支持 Markdown 语法。

  • st.image():用于添加图像到应用程序中。

  • st.dataframe():用于呈现 Pandas 数据框。

  • st.table():用于呈现简单的数据表格。

  • st.pyplot()、st.altair_chart()、st.plotly_chart():用于呈现 Matplotlib、Altair 或 Plotly 绘制的图表。

  • st.selectbox()、st.multiselect()、st.slider()、st.text_input():用于添加交互式小部件,允许用户在应用程序中进行选择、输入或滑动操作。

  • st.button()、st.checkbox()、st.radio():用于添加按钮、复选框和单选按钮,以触发特定的操作。

这些基础模块使得通过 Streamlit 能够轻松地构建交互式数据应用程序,并且在使用时可以根据需要进行组合和定制,更多内容请查看Streamlit入门中文文档


下面简单讲讲Streamlit的安装及使用


1. 环境准备与安装

首先,确保你的电脑上已经安装了 Python(建议版本 3.8+)。

安装步骤:

打开你的终端(Terminal 或 CMD),运行以下命令:

复制代码
pip install streamlit

验证安装:

安装完成后,你可以运行 Streamlit 内置的演示应用来检查是否成功:

复制代码
streamlit hello

如果安装成功,浏览器会自动打开一个本地页面(通常是 http://localhost:8501),你将看到 Streamlit 的官方演示。


2. Streamlit 的核心逻辑

Streamlit 的工作方式与传统的 Web 框架不同,更像是在写脚本:

  1. 你编写一个 Python 脚本(例如 app.py)。

  2. 每次用户与页面交互(点击按钮、输入文本),Streamlit 都会从头到尾重新运行整个脚本

  3. Streamlit 根据代码更新页面显示。


3. 快速上手:编写你的第一个应用

创建一个名为 app.py 的文件,我们将通过代码逐步演示核心功能。

第一步:基础文本与数据显示
复制代码
import streamlit as st
import pandas as pd
import numpy as np

# 1. 标题和文本
st.title('我的第一个 Streamlit 应用 🎈')
st.header('这是一个二级标题')
st.write('Hello World! `st.write` 是 Streamlit 的万能命令,可以渲染文本、数据、图表等。')

# 2. 展示数据表格
df = pd.DataFrame({
    '第一列': [1, 2, 3, 4],
    '第二列': [10, 20, 30, 40]
})

st.subheader('数据展示')
st.dataframe(df)  # 交互式表格
# st.table(df)    # 静态表格(适用于少量数据)
第二步:添加交互组件 (Widgets)

Streamlit 的精髓在于简单的交互。你不需要编写回调函数,只需将组件赋值给变量即可。

复制代码
st.subheader('交互组件')

# 按钮
if st.button('点击我'):
    st.write('你点击了按钮!')

# 滑动条
age = st.slider('请选择你的年龄', 0, 100, 25)
st.write(f'你选择的年龄是: {age}')

# 文本输入
name = st.text_input('输入你的名字', 'User')
st.write(f'你好, {name}!')
第三步:绘制图表

Streamlit 支持自带的简单图表,也完美支持 Matplotlib, Plotly, Altair 等第三方库。

复制代码
st.subheader('图表展示')

# 生成随机数据
chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c']
)

# 使用 Streamlit 原生折线图
st.line_chart(chart_data)

# 如果你想用 Matplotlib (可选)
# import matplotlib.pyplot as plt
# fig, ax = plt.subplots()
# ax.plot(chart_data['a'])
# st.pyplot(fig)

4. 如何运行应用

在终端中,进入 app.py 所在的目录,运行:

复制代码
streamlit run app.py

终端会显示访问地址(Local URL 和 Network URL)。只要保持终端运行,你在代码编辑器中修改代码并保存后,浏览器页面右上角会提示 "Rerun"(重新运行),点击即可实时查看更新。


5. 进阶布局与功能

为了让应用更专业,你需要掌握布局和缓存。

侧边栏 (Sidebar)

将控制组件放在侧边栏,让主界面更整洁。

复制代码
# 使用 st.sidebar
option = st.sidebar.selectbox(
    '你喜欢哪种水果?',
    ('苹果', '香蕉', '橘子')
)

st.write(f'你选择了: {option}')
列布局 (Columns)

将页面横向分割。

复制代码
col1, col2 = st.columns(2)

with col1:
    st.image("https://static.streamlit.io/examples/cat.jpg", caption="这是一只猫")

with col2:
    st.metric(label="温度", value="24 °C", delta="1.2 °C")
缓存 (Caching) - 非常重要

因为 Streamlit 每次交互都会重跑代码,如果你的代码包含耗时操作(如加载大数据集、跑复杂模型),页面会很卡。使用 @st.cache_data 装饰器可以解决这个问题。

复制代码
@st.cache_data
def load_data():
    # 假设这里有一个耗时的加载过程
    df = pd.read_csv('large_dataset.csv')
    return df

# 第一次运行时会执行函数,之后会直接读取缓存结果,速度飞快
df = load_data()

总结:常用命令速查表

命令 功能
st.write() 渲染几乎任何内容(文本、数据、图表)
st.markdown() 支持 Markdown 语法的文本
st.dataframe() 显示可排序、可滚动的表格
st.sidebar.* 在侧边栏放置组件
st.columns() 创建多列布局
st.text_input() 文本输入框
st.number_input() 数字输入框
st.file_uploader() 文件上传组件
st.session_state 用于在多次运行间保存变量状态(进阶)
相关推荐
满栀5852 小时前
三级联动下拉框
开发语言·前端·jquery
只想要搞钱2 小时前
python 学习记录--1(开发工具,链接数据库mysql)
python·学习
星浩AI2 小时前
深入理解 LlamaIndex:RAG 框架核心概念与实践
人工智能·后端·python
python开发笔记2 小时前
can(6) canopen python库使用
服务器·网络·python
rgeshfgreh2 小时前
Python变量与类型:从入门到精通
python
杨超越luckly2 小时前
HTML应用指南:利用GET请求获取网易云热歌榜
前端·python·html·数据可视化·网易云热榜
前端_yu小白2 小时前
React实现Vue的watch和computed
前端·vue.js·react.js·watch·computed·hooks
灯下夜无眠2 小时前
sklearn中fit、transform、fit_transform用法详解
人工智能·python·sklearn
多看书少吃饭2 小时前
OnlyOffice 编辑器的实现及使用
前端·vue.js·编辑器