当前位置：首页 > news >正文

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

news 来源：原创 2025/4/26 5:07:11

学习目标

✅ 掌握复杂交互逻辑的实现
✅ 学会自定义界面样式与布局
✅ 实现安全高效的文件处理
✅ 优化性能与用户体验

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.