自定义ttk.Style()的函数导致组件显示异常，求原因及解决办法

问题描述 #

调用customise_ttk_widgets_style(ss)函数后，ttk.Button和ttk.Label组件出现显示异常，注释掉s = customise_ttk_widgets_style(s)一行则恢复正常，需明确问题原因及修复方案。

代码示例 #

import tkinter as tk
import tkinter.ttk as ttk


BG = '#3b3b39'
FG = 'white'
DFONT = ('URW Gothic L', '10', 'Normal')


def customise_ttk_widgets_style(ss):
    # All Widgets
    ss.configure(".", font=DFONT, background=BG, foreground=FG, cap=tk.ROUND,
                 join=tk.ROUND)
    
    # main ttk.Frame
    ss.configure('Main.TFrame', background='pink')  # For debugging

    # Default ttk.Button
    ss.configure('TButton', padding=5, relief=tk.FLAT)
    ss.map('TButton',
           foreground=[("disabled", 'grey'), ('pressed', 'red'),
                       ('active', 'yellow')],
           background=[('disabled', '#646a67'), ('pressed', '!focus', BG),
                       ('active', '#535553')],
           relief=[('pressed', 'sunken'), ('!pressed', 'raised')],
           )
    return ss


if __name__ == "__main__":
    root = tk.Tk()
    root['background'] = BG
    s = ttk.Style()
    s = customise_ttk_widgets_style(s)  # 引发问题的函数调用
    button = ttk.Button(root, text="ttk.Button (!disabled)")
    dbutton = ttk.Button(root, text="ttk.Button (disabled)")
    dbutton.state(['!disabled', 'disabled'])
    label = ttk.Label(root, text="ttk.Label (!disabled)")
    dlabel = ttk.Label(root, text="ttk.Label (disabled)")
    dlabel.state(['!disabled', 'disabled'])
    button.grid(row=0, column=0)
    dbutton.grid(row=0, column=1)
    label.grid(row=1, column=0)
    dlabel.grid(row=1, column=1)
    root.mainloop()

效果对比 #

• 正确显示效果：
  
• 错误显示效果：
  

问题原因 #

在全局样式.的configure配置中，错误添加了cap和join两个属性：

• cap和join是**仅适用于线条类组件（如ttk.Separator、Canvas绘制的线条）**的样式参数，用于控制线条端点和连接处的样式。
• 所有ttk组件都会继承全局.样式，当Button、Label这类非线条组件强制继承这两个不兼容的属性时，会导致渲染逻辑冲突，进而出现显示异常。

解决办法 #

将cap和join从全局样式配置中移除，仅为需要的线条类组件单独配置这两个属性。

修改后的代码 #

import tkinter as tk
import tkinter.ttk as ttk


BG = '#3b3b39'
FG = 'white'
DFONT = ('URW Gothic L', '10', 'Normal')


def customise_ttk_widgets_style(ss):
    # 全局样式 - 移除不兼容的cap和join参数
    ss.configure(".", font=DFONT, background=BG, foreground=FG)
    
    # 仅给线条类组件配置cap和join（示例：给TSeparator配置）
    ss.configure("TSeparator", cap=tk.ROUND, join=tk.ROUND)
    
    # main ttk.Frame
    ss.configure('Main.TFrame', background='pink')  # For debugging

    # Default ttk.Button
    ss.configure('TButton', padding=5, relief=tk.FLAT)
    ss.map('TButton',
           foreground=[("disabled", 'grey'), ('pressed', 'red'),
                       ('active', 'yellow')],
           background=[('disabled', '#646a67'), ('pressed', '!focus', BG),
                       ('active', '#535553')],
           relief=[('pressed', 'sunken'), ('!pressed', 'raised')],
           )
    return ss


if __name__ == "__main__":
    root = tk.Tk()
    root['background'] = BG
    s = ttk.Style()
    s = customise_ttk_widgets_style(s)
    button = ttk.Button(root, text="ttk.Button (!disabled)")
    dbutton = ttk.Button(root, text="ttk.Button (disabled)")
    dbutton.state(['!disabled', 'disabled'])
    label = ttk.Label(root, text="ttk.Label (!disabled)")
    dlabel = ttk.Label(root, text="ttk.Label (disabled)")
    dlabel.state(['!disabled', 'disabled'])
    button.grid(row=0, column=0)
    dbutton.grid(row=0, column=1)
    label.grid(row=1, column=0)
    dlabel.grid(row=1, column=1)
    root.mainloop()

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