Python 交互式 Web 应用框架 Streamlit 教程：核心组件和布局方式

学习目标

掌握 Streamlit 的核心组件，如文本显示、数据展示和图表绘制。

学习 Streamlit 的布局方式，包括侧边栏、列布局和选项卡。

通过一个综合实用案例（数据仪表盘）巩固所学知识。

1. Streamlit 核心组件

1.1 文本显示

Streamlit 提供了多种文本显示组件，用于展示标题、普通文本、Markdown 格式文本等。

st.title(text, anchor=None)：

功能: 显示大标题。

参数:

text (str): 标题文本。

anchor (str): 标题的锚点（可选）。

示例:

st.title("Streamlit 核心组件示例", anchor="title")

st.header(text, anchor=None)：

功能: 显示中等大小的标题。

参数:

text (str): 标题文本。

anchor (str): 标题的锚点（可选）。

示例:

st.header("这是一个中等标题", anchor="header")

st.subheader(text, anchor=None)：

功能: 显示小标题。

参数:

text (str): 标题文本。

anchor (str): 标题的锚点（可选）。

示例:

st.subheader("这是一个小标题", anchor="subheader")

st.write(*args, **kwargs)

功能: 通用的文本显示函数，支持多种数据类型（字符串、数字、DataFrame 等）。

参数:

*args: 要显示的内容。

**kwargs: 可选参数。

示例:

st.write("这是一个简单的 Streamlit 应用程序。")

st.write(pd.DataFrame({"A": [1, 2, 3]}))

st.markdown(body, unsafe_allow_html=False) 功能: 显示 Markdown 格式的文本。

参数:

body (str): Markdown 文本。

unsafe_allow_html (bool): 是否允许 HTML 标签（默认 False）。

示例:

st.markdown("### 这是一个 Markdown 标题")

st.markdown("这是 **加粗** 的文本，这是 *斜体* 的文本。")

1.2 数据展示

Streamlit 提供了多种数据展示组件，用于展示表格、DataFrame 和 JSON 数据。

st.dataframe(data, width=None, height=None, use_container_width=True)：

功能: 显示交互式 DataFrame。

参数:

data (DataFrame): 要显示的 DataFrame。

width (int): 表格宽度（可选）。

height (int): 表格高度（可选）。

use_container_width (bool): 是否使用容器宽度（默认 True）。

示例:

st.dataframe(pd.DataFrame({"A": [1, 2, 3]}))

st.table(data)：

功能: 显示静态表格。

参数:

data (DataFrame): 要显示的 DataFrame。

示例:

st.table(pd.DataFrame({"A": [1, 2, 3]}))

st.json(body, expanded=True)：

功能: 显示 JSON 数据。

参数:

body (dict/list/str): JSON 数据。

expanded (bool): 是否默认展开 JSON 数据（默认 True）。

示例:

st.json({"name": "张三", "age": 25})

1.3 图表绘制

Streamlit 支持多种图表绘制方式，包括内置图表和 Matplotlib 图表。

st.line_chart(data, width=0, height=0, use_container_width=True)

功能: 绘制折线图。

参数:

data (DataFrame/Series): 数据。

width (int): 图表宽度（可选）。

height (int): 图表高度（可选）。

use_container_width (bool): 是否使用容器宽度（默认 True）。

示例:

st.line_chart(pd.DataFrame({"A": [1, 2, 3]}))

st.bar_chart(data, width=0, height=0, use_container_width=True) 功能: 绘制柱状图。

参数:

data (DataFrame/Series): 数据。

示例:

st.bar_chart(pd.DataFrame({"A": [1, 2, 3]}))

st.pyplot(fig=None, clear_figure=True, **kwargs)

功能: 显示 Matplotlib 图表。

参数:

fig (Figure): Matplotlib 图表对象。

clear_figure (bool): 是否清除图表（默认 True）。

示例:

import matplotlib.pyplot as plt

fig, ax = plt.subplots()

ax.plot([1, 2, 3])

st.pyplot(fig)

2. Streamlit 布局方式

2.1 侧边栏 (st.sidebar)

侧边栏用于放置用户输入控件或辅助信息。

示例代码:

# 侧边栏

st.sidebar.title("侧边栏标题")

name = st.sidebar.text_input("请输入您的名字")

st.sidebar.write(f"您好, {name}!")

2.2 列布局 (st.columns)

列布局用于将内容分成多列显示。

st.columns(spec, gap="small")

功能: 创建多列布局。

参数:

spec (int/list): 列数或列宽比例。

gap (str): 列间距（"small"/"medium"/"large"）。

示例:

col1, col2, col3 = st.columns([1, 2, 1])

with col1:

st.write("### 第一列")

with col2:

st.write("### 第二列")

with col3:

st.write("### 第三列")

2.3 选项卡 (st.tabs)

选项卡用于将内容分组显示。

st.tabs(tabs)

功能: 创建选项卡。

参数:

tabs (list): 选项卡标签列表。

示例:

tab1, tab2 = st.tabs(["选项卡 1", "选项卡 2"])

with tab1:

st.write("这是选项卡 1 的内容。")

with tab2:

st.write("这是选项卡 2 的内容。")

3. 综合实用案例：数据仪表盘

目标

学习如何使用 Streamlit 的核心组件和布局方式构建一个数据仪表盘。

功能:

显示标题和简介。

展示一个交互式 DataFrame。

绘制折线图和柱状图。

使用侧边栏选择图表类型。

使用列布局和选项卡组织内容。

完整代码:

在 StreamLib 项目src目录下创建day02目录，将如下代码保存为day02目录下的 app.py，目录结构大致如下： StreamLib项目搭建参考：

提示:项目源代码托管于：https://gitcode.com/ICodeWR/StudyFlow/tree/main/src/streamLib

STREAMLIB\SRC

├───day01

└───day02

└───app.py

app.py，其完整源代码如下：

import streamlit as st

import pandas as pd

import numpy as np

import matplotlib.pyplot as plt

# 设置中文字体

plt.rcParams['font.sans-serif'] = ['SimHei']  # 设置中文字体为黑体

plt.rcParams['axes.unicode_minus'] = False  # 解决负号显示问题

# 标题和简介

st.title("数据仪表盘示例")

st.write("这是一个简单的数据仪表盘，展示了 Streamlit 的核心组件和布局方式。")

# 侧边栏

st.sidebar.title("设置")

chart_type = st.sidebar.selectbox("选择图表类型", ["折线图", "柱状图"])

# 创建示例数据

data = pd.DataFrame(np.random.randn(20, 3), columns=["A", "B", "C"])

# 列布局

col1, col2 = st.columns([1, 2])

with col1:

st.write("### 交互式 DataFrame")

st.dataframe(data)

with col2:

st.write("### 图表")

if chart_type == "折线图":

st.line_chart(data)

else:

st.bar_chart(data)

# 选项卡

tab1, tab2 = st.tabs(["Matplotlib 图表", "关于"])

with tab1:

st.write("### Matplotlib 示例")

fig, ax = plt.subplots()

ax.plot(data["A"], label="A")

ax.plot(data["B"], label="B")

ax.set_title("Matplotlib 图表")

ax.legend()

st.pyplot(fig)

with tab2:

st.write("### 关于")

st.write("这是一个 Streamlit 数据仪表盘示例。")

4. 运行代码

在StreamLib项目目录下添加依赖库matplotlib numpy pandas，并激活虚拟环境：

# 添加依赖库

uv add matplotlib numpy  pandas

# 激活虚拟环境

.\.venv\Scripts\activate

在终端运行以下命令启动 Streamlit 应用：

streamlit run src\day02\app.py

打开浏览器，访问 http://localhost:8501，即可看到数据仪表盘。

运行效果示意图如下：

总结

本学习日志记录了 Streamlit 的核心组件和布局方式使用方法，并完成了一个数据仪表盘案例。接下来可以尝试扩展此案例，后续将继续学习 Streamlit 的交互组件。