如何创建仅运行选中标签页的Streamlit仪表盘

针对你遇到的原生标签页代码全量执行、selectbox切换页面堆叠且键冲突的问题，提供两种可行解决方案：

方案一：使用st.empty()容器动态切换内容 #

通过空容器包裹当前选中标签的内容，每次切换时自动替换旧内容，避免堆叠和键冲突，同时保证通用代码仅执行一次。

import streamlit as st

def do_commonstuff():
    # 通用初始化逻辑（如加载共享数据、初始化全局变量）
    return "共享数据示例"

def do_A():
    st.subheader("标签A内容")
    st.text_input("A专属输入框", key="input_a")
    st.write(f"通用变量值：{st.session_state['var']}")

def do_B():
    st.subheader("标签B内容")
    st.slider("B专属滑块", 0, 100, key="slider_b")
    st.write(f"通用变量值：{st.session_state['var']}")

def do_C():
    st.subheader("标签C内容")
    st.checkbox("C专属复选框", key="checkbox_c")
    st.write(f"通用变量值：{st.session_state['var']}")

# 通用代码：仅初始化一次
if 'var' not in st.session_state:
    st.session_state['var'] = do_commonstuff()

# 选择标签
tab_names = ['A','B','C']
tab = st.selectbox('选择标签', tab_names)

# 用empty容器动态渲染当前标签内容
with st.empty().container():
    if tab == 'A':
        do_A()
    elif tab == 'B':
        do_B()
    elif tab == 'C':
        do_C()

核心逻辑：st.empty()创建的容器会在每次切换标签时清空并替换内部内容，旧标签的组件会被销毁，不会出现堆叠或重复组件的键冲突。

方案二：优化原生st.tabs，仅执行当前标签代码 #

保留原生标签页的UI体验，通过Session State记录当前激活标签，仅执行对应标签的专属代码，避免无关代码重复运行。

import streamlit as st

def do_commonstuff():
    return "共享数据示例"

def do_A():
    st.subheader("标签A内容")
    st.text_input("A专属输入框", key="input_a")
    st.write(f"通用变量值：{st.session_state['var']}")

def do_B():
    st.subheader("标签B内容")
    st.slider("B专属滑块", 0, 100, key="slider_b")
    st.write(f"通用变量值：{st.session_state['var']}")

def do_C():
    st.subheader("标签C内容")
    st.checkbox("C专属复选框", key="checkbox_c")
    st.write(f"通用变量值：{st.session_state['var']}")

# 通用代码：仅初始化一次
if 'var' not in st.session_state:
    st.session_state['var'] = do_commonstuff()

# 初始化当前激活标签状态
if 'active_tab' not in st.session_state:
    st.session_state.active_tab = 'A'

# 创建原生标签页
tab_a, tab_b, tab_c = st.tabs(['A', 'B', 'C'])

# 标签A逻辑：捕获切换事件并执行专属代码
with tab_a:
    # 隐藏按钮用于捕获标签切换动作
    if st.button("切换到A", key="btn_a", use_container_width=True):
        st.session_state.active_tab = 'A'
    # 仅当前激活标签为A时执行代码
    if st.session_state.active_tab == 'A':
        do_A()

# 标签B逻辑
with tab_b:
    if st.button("切换到B", key="btn_b", use_container_width=True):
        st.session_state.active_tab = 'B'
    if st.session_state.active_tab == 'B':
        do_B()

# 标签C逻辑
with tab_c:
    if st.button("切换到C", key="btn_c", use_container_width=True):
        st.session_state.active_tab = 'C'
    if st.session_state.active_tab == 'C':
        do_C()

# 隐藏用于捕获事件的按钮
st.markdown("""
<style>
button[data-testid="baseButton-secondary"] {
    display: none;
}
</style>
""", unsafe_allow_html=True)

核心逻辑：通过隐藏按钮监听标签切换动作，更新Session State中的active_tab，仅当标签处于激活状态时执行其专属代码，避免无关代码重复运行。

方案选择建议 #

• 若不需要原生标签页的UI样式，优先选方案一，实现更简洁，无额外CSS依赖。
• 若需要保留原生标签页的切换体验，选择方案二，兼顾UI和代码执行效率。

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