如何在Tkinter Button上添加子Label并避免其显示异常

问题根源 #

Tkinter 原生 Button 属于系统原生绘制控件，触发悬浮、点击等交互时会主动重绘自身区域，直接覆盖内部添加的子控件，这是 Label 消失的根本原因。

可行方案 #

方案1：使用换行符实现多文本（简单场景优先） #

如果仅需要显示两段文本、对两段文本的独立样式要求不高，可以直接利用 Button 的 text 属性支持换行符的特性，配合对齐参数实现需求，无需额外添加子控件：

import tkinter as tk

def take():
    print("触发take事件")

root = tk.Tk()
canvas = tk.Canvas(root, width=200, height=200)
canvas.pack()

# 用\n分割两段文本，justify控制对齐方式
button_1 = tk.Button(
    canvas, 
    text='Take\nStream 1',
    command=take,
    width=12,
    justify=tk.LEFT, # 可选LEFT/CENTER/RIGHT
    font=('calibre', 10)
)
button_1.pack(pady=20)

root.mainloop()

方案2：自定义复合按钮控件（复杂样式需求优先） #

如果需要自定义两段文本的位置、字体等样式，推荐用 Frame 作为容器封装自定义按钮，完全规避原生按钮重绘覆盖子控件的问题，同时支持子控件相对定位、同步移动显隐，适合批量生成场景：

import tkinter as tk
from tkinter import ttk

class CustomButton(tk.Frame):
    def __init__(self, parent, main_text, sub_text, command=None, *args, **kwargs):
        super().__init__(parent, *args, **kwargs)
        self.command = command
        # 模拟原生按钮的默认样式
        normal_bg = ttk.Style().lookup('TButton', 'background')
        self.config(relief=tk.RAISED, borderwidth=2, bg=normal_bg)
        
        # 主文本标签，可自行调整样式和位置
        self.main_label = tk.Label(self, text=main_text, bg=normal_bg)
        self.main_label.pack(padx=5, pady=(15, 2))
        
        # 副文本标签，按需求设置相对位置，示例为左上角偏移10px
        self.sub_label = tk.Label(self, text=sub_text, font=('calibre',8), bg=normal_bg)
        self.sub_label.place(x=10, y=10)
        
        # 绑定事件模拟原生按钮交互
        self._bind_events()

    def _bind_events(self):
        # 父容器绑定交互事件
        self.bind('<ButtonPress-1>', self._on_press)
        self.bind('<ButtonRelease-1>', self._on_release)
        self.bind('<Enter>', self._on_enter)
        self.bind('<Leave>', self._on_leave)
        # 子控件同步绑定事件，避免点击子控件时无响应
        for child in self.winfo_children():
            child.bind('<ButtonPress-1>', self._on_press)
            child.bind('<ButtonRelease-1>', self._on_release)
            child.bind('<Enter>', self._on_enter)
            child.bind('<Leave>', self._on_leave)

    def _on_press(self, event):
        self.config(relief=tk.SUNKEN)

    def _on_release(self, event):
        self.config(relief=tk.RAISED)
        if self.command:
            self.command()

    def _on_enter(self, event):
        # 模拟按钮悬浮样式
        hover_bg = ttk.Style().lookup('TButton', 'background', state=['active'])
        self.config(bg=hover_bg)
        for child in self.winfo_children():
            child.config(bg=hover_bg)

    def _on_leave(self, event):
        # 恢复按钮正常样式
        normal_bg = ttk.Style().lookup('TButton', 'background')
        self.config(bg=normal_bg)
        for child in self.winfo_children():
            child.config(bg=normal_bg)

# 批量使用示例
def take():
    print("take事件触发")

root = tk.Tk()
canvas = tk.Canvas(root, width=400, height=500)
canvas.pack()

# 批量生成10个自定义按钮，无需手动计算子标签坐标
for i in range(10):
    btn = CustomButton(
        canvas,
        main_text="Take",
        sub_text=f"Stream {i+1}",
        command=take,
        width=100,
        height=50
    )
    btn.pack(pady=5)

root.mainloop()

该方案完全满足需求：

• 副文本直接相对于外层Frame定位，无需计算全局坐标
• 移动、显隐仅需操作外层CustomButton实例，内部元素同步生效
• 无原生按钮重绘覆盖子控件的问题，交互稳定

临时方案：强制提升Label层级 #

如果坚持使用原生Button嵌套Label的写法，可以绑定按钮的重绘相关事件，每次重绘后手动将Label提升到最顶层，该方案偶尔会出现闪烁，稳定性弱于自定义控件：

button_1 = tk.Button(canvas, text='Take',command=take,width='12')
button_1.pack()
label_1 = tk.Label(button_1, text='Stream 1',font=('calibre',8))
label_1.place(x=10, y=10)

# 所有触发按钮重绘的事件触发时，将Label提到顶层
def lift_label(event):
    label_1.lift()

for event_name in ['<Enter>', '<Leave>', '<ButtonPress-1>', '<ButtonRelease-1>', '<Configure>']:
    button_1.bind(event_name, lift_label)

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