快速构建低代码 Web 应用：Streamlit 完全指南

前言

你是否遇到过这样的场景？
- 实现了一个算法功能，希望团队内网成员无需复杂配置即可直接使用
- 需要快速搭建一个兼具低代码、美观性和缓存机制的 Web 应用
- 希望在 5-10 分钟 内完成开发以提升团队效率

这正是 Python 的 Streamlit 与 Gradio 的用武之地！这两个框架专为无前端经验的算法工程师设计，能快速将算法转化为 Web 应用。本文重点解析 Streamlit 的使用方法，Gradio 用户可参考其官方文档。

整体规划

本系列将分四篇文章系统讲解 Streamlit：
1. 原理介绍与布局控制（本文）
2. 基础组件速览
3. 缓存机制与部署实践
4. Matplotlib 图表、Pandas 表格与 SQL 数据库集成

案例展示

案例一：5 分钟构建图像超分辨率应用

✅ 开源项目地址：super-easy-super-resolution

案例二：30 分钟开发 IGS 检测工具

通过这两个案例可见，Streamlit 能快速实现多媒体交互、低代码量且界面友好的 Web 应用。

初识 Streamlit

安装与运行

pip install streamlit

创建 app.py： 

import streamlit as st 

# 全局配置
st.set_page_config(
    page_title='Streamlit 演示',
    page_icon='✨',
    layout='wide'
)

# 页面内容
st.title('Hello World!')
st.markdown('> 直接通过 `st.markdown` 渲染 Markdown 内容')

运行命令： 

streamlit run app.py

默认访问地址：http://localhost:8501（自动寻找可用端口）

核心原理

渲染逻辑


- 执行 app.py 时逐行解析代码
- Streamlit 方法自动转换为前端组件
- 支持热更新：页面交互触发脚本重执行

布局控制详解

侧边栏 (Sidebar)

with st.sidebar:
    st.title('应用功能')
    st.markdown('---')
    st.markdown('''
    - 特性 1
    - 特性 2
    - 特性 3''')

分列布局 (Columns)

col1, col2 = st.columns(2)
with col1:
    st.title("左栏")
with col2:
    st.title("右栏")

标签页 (Tabs)

tab1, tab2 = st.tabs(["OpenCV", "Pillow"])
with tab1:
    st.code('''
    import cv2
    image = cv2.imread('image.png')''')

折叠容器 (Expander)

expander = st.expander("查看详情")
expander.write("隐藏的详细信息...")

动态占位符 (Empty)

placeholder = st.empty()
for i in range(10):
    placeholder.write(f"倒计时: {10-i}秒")
    time.sleep(1)

嵌套布局实战

main_col, side_col = st.columns([3, 1])
with main_col:
    st.title("主内容区")
    sub_col1, sub_col2 = st.columns(2)
    with sub_col1:
        st.info("子列 1")
with side_col:
    st.success("侧边辅助信息")

结语

通过 Streamlit 的声明式语法，开发者可像编写普通 Python 脚本一样构建交互式 Web 应用。后续文章将深入讲解组件交互、缓存优化等高级功能，助你打造更强大的生产力工具！

提示：通过右上角菜单可访问 Streamlit 官方文档，获取最新功能与配置说明。