如何在 tkinter.ttk.Button 中创建箭头并控制它的大小?
How to create arrow in a tkinter.ttk.Button and control it's size?
我想创建一个带有箭头的 ttk.button 并且可以更改箭头的大小。
我发现 'TButton' 固有地包含 StyleNames TButton.leftarrow
,它不会被 ttk.Style().layout() 公开。
问题:
(1) 如何激活这些 StyleNames?
(2) 如何控制.leftarrow
的大小?我注意到它有一个 arrowsize
选项。如何使用?
import tkinter as tk
import tkinter.ttk as ttk
class App(ttk.Frame):
def __init__(self, parent):
ttk.Frame.__init__(self, parent)
self.parent = parent
self.setStyle()
self.setWidget()
def setStyle(self):
style = ttk.Style()
print('Left.TButton layout are:', style.layout('Left.TButton'))
print("Left.TButton.leftarrow style.element_options: ",
style.element_options('Left.TButton.leftarrow'))
style.configure('Left.TButton', background='yellow')
style.configure('Left.TButton.leftarrow', background='white',
arrowsize=20)
def setWidget(self):
self.lbutton = ttk.Button(self.parent, style='Left.TButton')
self.lbutton2 = ttk.Button(self.parent, style='Left.TButton.leftarrow')
self.lbutton.pack()
self.lbutton2.pack()
if __name__ == '__main__':
root = tk.Tk()
root.title('Test')
root.geometry('200x50')
app = App(root)
app.pack(expand=1, fill='both')
经过大量尝试和对 ttk 文档的深入研究,我发现了以下内容:
- 要在按钮中创建一个箭头,我必须声明一个
arrow
元素
作为自定义样式布局中 focus
元素的子元素
将用于 ttk.Button()
小部件。为此,我需要
使用 ttk.Style().layout()
方法。
- 箭头的大小取决于标签的字体大小
元素。因此,必须在布局中声明一个
label
元素
风格 TButton
。 arrowleft
元素的 arrowsize
选项似乎不起作用。我已经注释掉了这行不起作用的代码。但是,leftarrow
元素的 arrowcolor
选项确实有效。要调整 label
元素的字体大小,使用了 ttk.Style().configuration
方法。
测试脚本中的方法 2 演示了我的问题的解决方案。
测试代码:
import tkinter as tk
import tkinter.ttk as ttk
class App(ttk.Frame):
def __init__(self, parent):
ttk.Frame.__init__(self, parent)
self.parent = parent
self.setStyle()
self.setWidget()
def setStyle(self):
style = ttk.Style()
print('\nDefault TButton layout:')
print(style.layout('TButton'))
print ('\nTButton Elements and their options:')
print("border options: ", style.element_options('Button.border'))
print("focus options: ", style.element_options('Button.focus'))
print("padding options: ",style.element_options('Button.padding'))
print("label options: ", style.element_options('Button.label'))
print("arrow options: ", style.element_options('Button.arrow'))
print ('\nElement TButton.label and its options:')
print("compound: ", style.lookup('Button.label', 'compound'))
print("space: ", style.lookup('Button.label', 'space'))
print("text: ", style.lookup('Button.label', 'text'))
print("font: ", style.lookup('Button.label', 'font'))
print("foreground: ",style.lookup('Button.label', 'foreground'))
print("underline: ", style.lookup('Button.label', 'underline'))
print("width: ", style.lookup('Button.label', 'width'))
print("anchor: ", style.lookup('Button.label', 'anchor'))
print("justify: ", style.lookup('Button.label', 'justify'))
print("wraplength: ",style.lookup('Button.label', 'wraplength'))
print("embossed: ", style.lookup('Button.label', 'embossed'))
print("image: ", style.lookup('Button.label', 'image'))
print("stipple: ", style.lookup('Button.label', 'stipple'))
print("background: ",style.lookup('Button.label', 'background'))
print ('\nElement TButton.arrow and its options:')
print("background: ", style.lookup('Button.arrow', 'background'))
print("relief: ", style.lookup('Button.arrow', 'relief'))
print("borderwidth: ",style.lookup('Button.arrow', 'borderwidth'))
print("arrowcolor: ", style.lookup('Button.arrow', 'arrowcolor'))
print("arrowsize: ", style.lookup('Button.arrow', 'arrowsize'))
#Define style Default.TButton with yellow background
style.configure('Default.TButton', background='yellow')
#Change the 2 options of the "label" element in its style's layout
style.configure('Default.TButton.label', foreground='red')
style.configure('Default.TButton.label', borderwidth=20)
print ('\nElement Default.TButton.label and its options (after configuration):')
print("background: ", style.lookup('Default.TButton.border', 'background'))
print("borderwidth: ", style.lookup('Default.TButton.border', 'borderwidth'))
#Approach 1
#==========
# Define style Left.TButton to show the following elements: leftarrow,
# padding, label
style.layout(
'Left1.TButton',[
('Button.focus', {'children': [
('Button.leftarrow', None),
('Button.padding', {'sticky': 'nswe', 'children': [
('Button.label', {'sticky': 'nswe'}
)]}
)]}
)]
)
#Change 3 options of the "arrow" element in style "Left.TButton"
style.configure('Left1.TButton.leftarrow',
background='white',
borderwidth=10,
arrowsize=20)
print('\nElement TButton.arrow and its options (after changing):')
print("background: ", style.lookup('Left1.TButton.arrow','background'))
print("borderwidth: ", style.lookup('Left1.TButton.arrow','borderwidth'))
print("arrowsize: ", style.lookup('Left1.TButton.arrow','arrowsize'))
#Approach 2
#==========
style.layout(
'Left2.TButton',[
('Button.focus', {'children': [
('Button.leftarrow', None),
('Button.padding', {'sticky': 'nswe', 'children': [
('Button.label', {'sticky': 'nswe'}
)]}
)]}
)]
)
style.configure('Left2.TButton',font=('','20','bold'), width=1, arrowcolor='white')
#style.configure('Left2.TButton', width=1, arrowcolor='white', arrowsize='20')
#option arrowsize does not work
def setWidget(self):
self.lbutton = ttk.Button(self.parent, style='Default.TButton',
text='Default.TButton')
self.lbutton1 = ttk.Button(self.parent, style='Left1.TButton',
text='Left1.Button')
self.lbutton2 = ttk.Button(self.parent, style='Left2.TButton',
text='')
self.lbutton.pack()
self.lbutton1.pack()
self.lbutton2.pack()
if __name__ == '__main__':
root = tk.Tk()
root.title('Test')
root.geometry('200x100')
app = App(root)
app.pack(expand=1, fill='both')
我想创建一个带有箭头的 ttk.button 并且可以更改箭头的大小。
我发现 'TButton' 固有地包含 StyleNames TButton.leftarrow
,它不会被 ttk.Style().layout() 公开。
问题:
(1) 如何激活这些 StyleNames?
(2) 如何控制.leftarrow
的大小?我注意到它有一个 arrowsize
选项。如何使用?
import tkinter as tk
import tkinter.ttk as ttk
class App(ttk.Frame):
def __init__(self, parent):
ttk.Frame.__init__(self, parent)
self.parent = parent
self.setStyle()
self.setWidget()
def setStyle(self):
style = ttk.Style()
print('Left.TButton layout are:', style.layout('Left.TButton'))
print("Left.TButton.leftarrow style.element_options: ",
style.element_options('Left.TButton.leftarrow'))
style.configure('Left.TButton', background='yellow')
style.configure('Left.TButton.leftarrow', background='white',
arrowsize=20)
def setWidget(self):
self.lbutton = ttk.Button(self.parent, style='Left.TButton')
self.lbutton2 = ttk.Button(self.parent, style='Left.TButton.leftarrow')
self.lbutton.pack()
self.lbutton2.pack()
if __name__ == '__main__':
root = tk.Tk()
root.title('Test')
root.geometry('200x50')
app = App(root)
app.pack(expand=1, fill='both')
经过大量尝试和对 ttk 文档的深入研究,我发现了以下内容:
- 要在按钮中创建一个箭头,我必须声明一个
arrow
元素 作为自定义样式布局中focus
元素的子元素 将用于ttk.Button()
小部件。为此,我需要 使用ttk.Style().layout()
方法。 - 箭头的大小取决于标签的字体大小
元素。因此,必须在布局中声明一个
label
元素 风格TButton
。arrowleft
元素的arrowsize
选项似乎不起作用。我已经注释掉了这行不起作用的代码。但是,leftarrow
元素的arrowcolor
选项确实有效。要调整label
元素的字体大小,使用了ttk.Style().configuration
方法。
测试脚本中的方法 2 演示了我的问题的解决方案。
测试代码:
import tkinter as tk
import tkinter.ttk as ttk
class App(ttk.Frame):
def __init__(self, parent):
ttk.Frame.__init__(self, parent)
self.parent = parent
self.setStyle()
self.setWidget()
def setStyle(self):
style = ttk.Style()
print('\nDefault TButton layout:')
print(style.layout('TButton'))
print ('\nTButton Elements and their options:')
print("border options: ", style.element_options('Button.border'))
print("focus options: ", style.element_options('Button.focus'))
print("padding options: ",style.element_options('Button.padding'))
print("label options: ", style.element_options('Button.label'))
print("arrow options: ", style.element_options('Button.arrow'))
print ('\nElement TButton.label and its options:')
print("compound: ", style.lookup('Button.label', 'compound'))
print("space: ", style.lookup('Button.label', 'space'))
print("text: ", style.lookup('Button.label', 'text'))
print("font: ", style.lookup('Button.label', 'font'))
print("foreground: ",style.lookup('Button.label', 'foreground'))
print("underline: ", style.lookup('Button.label', 'underline'))
print("width: ", style.lookup('Button.label', 'width'))
print("anchor: ", style.lookup('Button.label', 'anchor'))
print("justify: ", style.lookup('Button.label', 'justify'))
print("wraplength: ",style.lookup('Button.label', 'wraplength'))
print("embossed: ", style.lookup('Button.label', 'embossed'))
print("image: ", style.lookup('Button.label', 'image'))
print("stipple: ", style.lookup('Button.label', 'stipple'))
print("background: ",style.lookup('Button.label', 'background'))
print ('\nElement TButton.arrow and its options:')
print("background: ", style.lookup('Button.arrow', 'background'))
print("relief: ", style.lookup('Button.arrow', 'relief'))
print("borderwidth: ",style.lookup('Button.arrow', 'borderwidth'))
print("arrowcolor: ", style.lookup('Button.arrow', 'arrowcolor'))
print("arrowsize: ", style.lookup('Button.arrow', 'arrowsize'))
#Define style Default.TButton with yellow background
style.configure('Default.TButton', background='yellow')
#Change the 2 options of the "label" element in its style's layout
style.configure('Default.TButton.label', foreground='red')
style.configure('Default.TButton.label', borderwidth=20)
print ('\nElement Default.TButton.label and its options (after configuration):')
print("background: ", style.lookup('Default.TButton.border', 'background'))
print("borderwidth: ", style.lookup('Default.TButton.border', 'borderwidth'))
#Approach 1
#==========
# Define style Left.TButton to show the following elements: leftarrow,
# padding, label
style.layout(
'Left1.TButton',[
('Button.focus', {'children': [
('Button.leftarrow', None),
('Button.padding', {'sticky': 'nswe', 'children': [
('Button.label', {'sticky': 'nswe'}
)]}
)]}
)]
)
#Change 3 options of the "arrow" element in style "Left.TButton"
style.configure('Left1.TButton.leftarrow',
background='white',
borderwidth=10,
arrowsize=20)
print('\nElement TButton.arrow and its options (after changing):')
print("background: ", style.lookup('Left1.TButton.arrow','background'))
print("borderwidth: ", style.lookup('Left1.TButton.arrow','borderwidth'))
print("arrowsize: ", style.lookup('Left1.TButton.arrow','arrowsize'))
#Approach 2
#==========
style.layout(
'Left2.TButton',[
('Button.focus', {'children': [
('Button.leftarrow', None),
('Button.padding', {'sticky': 'nswe', 'children': [
('Button.label', {'sticky': 'nswe'}
)]}
)]}
)]
)
style.configure('Left2.TButton',font=('','20','bold'), width=1, arrowcolor='white')
#style.configure('Left2.TButton', width=1, arrowcolor='white', arrowsize='20')
#option arrowsize does not work
def setWidget(self):
self.lbutton = ttk.Button(self.parent, style='Default.TButton',
text='Default.TButton')
self.lbutton1 = ttk.Button(self.parent, style='Left1.TButton',
text='Left1.Button')
self.lbutton2 = ttk.Button(self.parent, style='Left2.TButton',
text='')
self.lbutton.pack()
self.lbutton1.pack()
self.lbutton2.pack()
if __name__ == '__main__':
root = tk.Tk()
root.title('Test')
root.geometry('200x100')
app = App(root)
app.pack(expand=1, fill='both')