Streamlit中调用的download_button为何显示在text_input组件上方？

你当前代码里用on_change回调函数渲染下载按钮，Streamlit的组件渲染逻辑是回调函数内的组件会在页面刷新时优先于主流程组件渲染，所以下载按钮会跑到输入框上方。同时代码里还有几处逻辑错误需要修正，以下是调整后的完整方案：

修正后的代码 #

import os
import streamlit as st

filelist = []
for root, dirs, files in os.walk("/home/lungsang/Desktop/levelpack-UI/content/A0/1 docx-raw"):
    for file in files:
        filename = os.path.join(root, file)
        filelist.append(filename)
with st.expander("📁 1 docx-raw"):
    st.write(filelist)

if __name__ == '__main__':
    # 先渲染文本输入框
    st.text_input('请输入要下载的文件名', key='text_key')
    
    # 在输入框之后判断并渲染下载按钮
    input_filename = st.session_state.get('text_key', '')
    if input_filename in filelist:
        # 读取文件内容作为下载数据（原代码直接传路径会下载路径字符串）
        with open(input_filename, 'rb') as f:
            file_data = f.read()
        # 设置下载时的默认文件名（只保留文件名不含路径）
        download_name = os.path.basename(input_filename)
        st.download_button('下载文件', data=file_data, file_name=download_name)

关键调整说明 #

• 调整组件渲染顺序：先渲染文本输入框，再根据输入值判断是否显示下载按钮，从根本上保证按钮在输入框下方
• 修正遍历逻辑：原代码错误遍历filename变量，改为遍历filelist列表
• 修正Session State调用：把st.session改为正确的st.session_state
• 完善下载逻辑：原代码直接传文件路径会导致下载的是路径字符串，现在改为读取文件实际内容，并设置合理的默认下载文件名

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