如何实现ipywidgets.ToggleButtons多按钮使用相同标签

当使用ipywidgets.ToggleButtons时，如果传入包含重复标签的选项（比如options=[("label1",value1), ("label2",value2),("label1",value3)]），会出现后台能正确返回对应.value和.index，但点击第二个"label1"时，视觉上会选中第一个"label1"按钮的显示异常问题。

解决方法：给重复标签添加不可见唯一标识 #

通过给重复的标签字符串添加**零宽空格（\u200B）**这类不可见的Unicode字符，让每个标签在底层字符串上唯一，同时不影响用户视觉体验。这样前端就不会混淆重复标签的按钮，点击时的选中状态会正确对应到实际点击的按钮，后台返回的业务值也不受影响。

代码示例

import ipywidgets as widgets
from collections import defaultdict

realoptions = "One word in different location is possibly a different word".split()
# 为重复标签生成唯一的视觉等价字符串
label_counter = defaultdict(int)
unique_options = []
for word in realoptions:
    # 给重复的标签添加对应次数的零宽空格，保证字符串唯一
    unique_label = word + '\u200B' * label_counter[word]
    # 保持value为原词，不影响业务逻辑
    unique_options.append((unique_label, word))
    label_counter[word] += 1

t = widgets.ToggleButtons(
    options=unique_options, 
    description='选择:',
    disabled=False,
    button_style=''
)

# 可选：监听选中事件，验证返回值正确性
def on_select_change(change):
    print(f"选中索引: {t.index}, 选中值: {change['new']}")

t.observe(on_select_change, names='value')
t

原理说明 #

零宽空格是不会在页面上显示的字符，添加后每个标签的实际字符串是唯一的，避免了前端因标签文本重复而混淆按钮的选中状态。用户看到的按钮文本和原本一致，同时点击任意重复标签的按钮时，视觉选中状态和后台返回的.index、.value都会正确对应。

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