如何通过点击按钮切换Ipywidget中显示的部件组合？

需求说明 #

已编写两组Ipywidgets组件代码，需通过两个固定按钮实现组件切换：

• 绘图（Plot）与滑块（Slider）：移动滑块可实时修改正弦曲线的频率
• 下拉框（Dropdown）与浮点数输入框（FloatText）：下拉框和输入框联动，自动计算乘积并显示
  要求界面始终保留两个切换按钮，点击后在按钮旁显示对应组件，且所有组件保持交互功能。

整合后的完整代码 #

%matplotlib notebook
from ipywidgets import *
import numpy as np
import matplotlib.pyplot as plt

# 初始化切换按钮
button1 = Button(description="Plot/Slider")
button2 = Button(description="Dropdown/Float")
buttons = VBox(children=[button1, button2])

# 创建动态内容的输出容器
content_output = Output()

# 整体布局：按钮区域 + 内容显示区域
all_widgets = HBox(children=[buttons, content_output])
display(all_widgets)

# ---------------------- 绘图/滑块组件初始化 ----------------------
x = np.linspace(0, 2 * np.pi, 100)
fig = plt.figure(figsize=(6, 4))
ax = fig.add_subplot(1, 1, 1)
line, = ax.plot(x, np.sin(x))
ax.set_ylim(-1.2, 1.2)

def update_plot(w=1.0):
    line.set_ydata(np.sin(w * x))
    fig.canvas.draw()

# 创建滑块交互控件
plot_slider_widget = interact(update_plot, w=(0.1, 5.0, 0.1))

# ---------------------- 下拉框/浮点数组件初始化 ----------------------
dW = Dropdown(options=['2', '1'], description='系数:')
rW = FloatText(value=200, description='数值:')
aW = FloatText(description='乘积:')

def change_a(change):
    try:
        aW.value = int(dW.value) * int(rW.value)
    except ValueError:
        aW.value = 0

# 绑定值变化事件
dW.observe(change_a, names='value')
rW.observe(change_a, names='value')

# 组合下拉框组件布局
dropdown_float_widget = VBox(children=[dW, rW, aW])

# ---------------------- 按钮切换逻辑 ----------------------
def show_plot_slider(b):
    with content_output:
        content_output.clear_output(wait=True)
        display(plot_slider_widget)

def show_dropdown_float(b):
    with content_output:
        content_output.clear_output(wait=True)
        display(dropdown_float_widget)

# 绑定按钮点击事件
button1.on_click(show_plot_slider)
button2.on_click(show_dropdown_float)

# 默认显示绘图组件
show_plot_slider(None)

关键实现说明 #

• Output容器：使用Output组件作为动态内容的载体，通过clear_output(wait=True)清空旧内容并避免界面闪烁
• 预初始化组件：提前创建两组组件实例，点击按钮时直接显示，避免重复初始化导致的性能问题
• 精准事件绑定：为observe方法指定names='value'，仅当组件值变化时触发回调，减少不必要的执行
• 异常处理：添加try-except块防止输入非数值时出现报错，提升鲁棒性
• 默认显示：启动时默认展示一组组件，优化初始用户体验

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