调用.close()后如何重新显示ipywidgets的Tab组件？

问题原因 #

当调用组件的close()方法后，该组件会被标记为已关闭状态，后续再次调用display()时，ipywidgets无法正确渲染组件，而是输出组件的字符串表示，这就是返回页面时Tab组件变成文本的原因。

解决方案：用父容器管理页面切换 #

不要直接销毁和重新显示组件，而是使用一个父容器（如VBox）来承载当前页面，切换时仅更新父容器的children属性，这样组件始终保持活跃状态，既能正常渲染，还能保留输入状态。

具体实现代码 #

import ipywidgets as widgets
from IPython.display import display

# 1. 预先创建所有页面组件
# 登录Tab页面的两个标签内容
staff_tab_content = widgets.VBox([
    widgets.Text(description='Username:'),
    widgets.Password(description='Password:'),
    widgets.Button(description='Login'),
    widgets.Button(description='Forget Password')
])
member_tab_content = widgets.VBox([
    widgets.Text(description='Username:'),
    widgets.Password(description='Password:'),
    widgets.Button(description='Login'),
    widgets.Button(description='Forget Password'),
    widgets.Button(description='Sign up')
])

# 组装登录Tab页面，添加返回按钮
login_tab = widgets.Tab(children=[staff_tab_content, member_tab_content])
login_tab.set_title(0, 'Staff')
login_tab.set_title(1, 'Member')
login_page = widgets.VBox([
    login_tab,
    widgets.Button(description='Back to Previous Page')
])

# 示例初始页面
initial_page = widgets.VBox([
    widgets.Label('Welcome to Initial Page'),
    widgets.Button(description='Go to Login')
])

# 2. 创建主容器，用于承载当前显示的页面
main_container = widgets.VBox([initial_page])

# 3. 定义页面切换函数
def switch_to_login(_):
    main_container.children = [login_page]

def switch_to_initial(_):
    main_container.children = [initial_page]

# 4. 绑定按钮点击事件
initial_page.children[1].on_click(switch_to_login)
login_page.children[1].on_click(switch_to_initial)

# 5. 显示主容器
display(main_container)

说明 #

• 所有页面组件预先创建，切换时仅替换主容器的子元素，组件不会被销毁，输入框内容等状态会被保留。
• 避免使用close()方法销毁组件，通过容器切换实现页面的显示/隐藏，确保组件能正常渲染。

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