Streamlit Todo应用CSS容器失效问题及代码优化咨询

在Streamlit里直接给原生组件（如st.title()生成的h1）套自定义HTML/CSS容器容易出问题，因为Streamlit会自动给组件添加外层DOM结构。推荐直接用HTML渲染标题并包裹容器：

# 替换web.py中原有的st.title()、st.header()
st.markdown("""
    <div style="padding: 16px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
        <h1 style="margin: 0;">Todo应用</h1>
    </div>
""", unsafe_allow_html=True)

st.markdown("""
    <div style="padding: 12px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.08); margin-top: 16px;">
        <h2 style="margin: 0;">待办列表</h2>
    </div>
""", unsafe_allow_html=True)

核心要点：

• 用st.markdown()配合unsafe_allow_html=True渲染自定义HTML结构
• 容器阴影样式直接写在div的style属性中，避免全局样式冲突
• 去掉标题默认margin，让容器包裹更紧凑

如果想复用样式，可定义全局CSS变量：

# 定义全局样式
CONTAINER_STYLE = """
    <style>
        .shadow-container {
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 16px;
        }
        .shadow-container h1, .shadow-container h2 {
            margin: 0;
        }
    </style>
"""

# 加载样式
st.markdown(CONTAINER_STYLE, unsafe_allow_html=True)

# 复用容器
st.markdown('<div class="shadow-container"><h1>Todo应用</h1></div>', unsafe_allow_html=True)
st.markdown('<div class="shadow-container"><h2>待办列表</h2></div>', unsafe_allow_html=True)

1. 功能模块拆分 #

• functions.py：只保留与Todo数据操作相关的函数，严格遵循单一职责原则：

  def get_todos(filepath="todos.txt"):
      try:
          with open(filepath, "r") as file:
              return file.readlines()
      except FileNotFoundError:
          return []
  
  def write_todos(todos, filepath="todos.txt"):
      with open(filepath, "w") as file:
          file.writelines(todos)
  

  禁止将UI逻辑放入此文件。
• web.py：专注处理Streamlit的UI渲染和用户交互，仅调用functions.py的方法处理数据。

2. 配置与常量管理 #

将文件路径、样式常量等抽离为全局常量，可放在web.py顶部或单独的config.py文件中：

# web.py 顶部
TODO_FILE_PATH = "todos.txt"
SHADOW_CONTAINER_CSS = """
    <style>
        .shadow-container { ... }
    </style>
"""

3. 错误处理 #

对文件操作添加异常捕获，避免因文件缺失导致应用崩溃，如上面get_todos函数中的try-except逻辑。

4. Streamlit会话状态管理 #

使用st.session_state管理用户输入状态，避免重复提交问题：

# web.py 中新增待办的逻辑
if "new_todo" not in st.session_state:
    st.session_state.new_todo = ""

def add_todo():
    todo = st.session_state.new_todo.strip() + "\n"
    if todo:
        todos = get_todos(TODO_FILE_PATH)
        todos.append(todo)
        write_todos(todos, TODO_FILE_PATH)
        st.session_state.new_todo = ""  # 清空输入框

st.text_input("添加新待办:", key="new_todo", on_change=add_todo)

5. 性能与可读性优化 #

• 用@st.cache_data缓存get_todos的结果（待办数据不频繁变更时），减少重复文件读取：

  import streamlit as st
  
  @st.cache_data
  def get_todos(filepath="todos.txt"):
      try:
          with open(filepath, "r") as file:
              return file.readlines()
      except FileNotFoundError:
          return []
  

• 给函数、变量起有意义的名字，避免模糊命名
• 保持代码缩进一致（推荐4个空格），添加必要的简洁注释

内容的提问来源于stack exchange，提问作者Alok Marathe