WebUI可视化：第5章：WebUI高级功能开发

学习目标

• ✅ 掌握复杂交互逻辑的实现

• ✅ 学会自定义界面样式与布局

• ✅ 实现安全高效的文件处理

• ✅ 优化性能与用户体验

---

5.1 自定义样式开发

5.1.1 修改主题颜色（以Streamlit为例）

在应用入口处添加全局样式：

python

import streamlit as st  

# 自定义主题  
st.markdown("""  
<style>  
    /* 修改主色调 */  
    .st-bb { background-color: #f0f8ff }  
    .css-1d391kg { color: #2c3e50 }  

    /* 按钮样式 */  
    .stButton>button {  
        border: 2px solid #3498db;  
        border-radius: 20px;  
        padding: 10px 24px;  
    }  
</style>  
""", unsafe_allow_html=True)  

st.title("个性化样式示例")  

5.1.2 动态样式切换

添加下拉菜单选择主题：

python

theme = st.selectbox("选择主题", ["默认", "暗黑"])  

if theme == "暗黑":  
    st.markdown("""  
    <style>  
        body { background: #1a1a1a; color: white }  
    </style>  
    """, unsafe_allow_html=True)  

---

5.2 异步任务处理

5.2.1 进度条实现

模拟长时间任务处理：

python

import time  

def long_task():  
    progress_bar = st.progress(0)  
    status_text = st.empty()  

    for i in range(100):  
        # 更新进度  
        progress_bar.progress(i + 1)  
        status_text.text(f"处理中... {i+1}%")  
        time.sleep(0.05)  

    status_text.text("处理完成！")  

if st.