如何在 tkinter.ttk.Button 中创建箭头并控制它的大小? [英] How to create arrow in a tkinter.ttk.Button and control it's size?

问题描述

我想创建一个带有箭头的 ttk.button 并且可以改变箭头的大小.

I would like to create ttk.button with an arrow in it and have the arrow size changable.

我发现 'TButton' 固有地包含 StyleNames TButton.leftarrow，它没有被 ttk.Style().layout() 暴露.

I discovered 'TButton' inherently contains StyleNames TButton.leftarrow which is not exposed by the ttk.Style().layout().

问题:(1) 如何激活这些 StyleNames?(2) 如何控制.leftarrow的大小?我注意到它有一个 arrowsize 选项.我如何使用它?

Questions: (1) How do I activate these StyleNames? (2) How do I control the size of .leftarrow? I notice it has a arrowsize option . How do I use it?

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 文档的仔细研究后，我发现了以下内容:

After quite a lot of attempts and closer studies of the ttk documentations, I discovered the following:

1. 要在按钮中创建箭头，我必须声明一个 arrow 元素作为自定义样式布局中 focus 元素的子元素用于 ttk.Button() 小部件.为此，我需要使用 ttk.Style().layout() 方法.
2. 箭头的大小取决于标签的字体大小元素.因此，必须在布局中声明 label 元素TButton 样式.arrowleft 元素的 arrowsize 选项似乎不起作用.我已经注释掉了这行不起作用的代码.但是，leftarrow 元素的 arrowcolor 选项确实有效.为了调整 label 元素的字体大小，使用了 ttk.Style().configuration 方法.

1. To create a arrow in the button, I have to declare a arrow element as the child of the focus element in the layout of the custom style that is to be used for the ttk.Button() widget. To do this, I needed to use the ttk.Style().layout() method.
2. The size of the arrow is dependent on the font size of the label element. Therefore, a label element had to be declared in layout of the style TButton. The arrowsize option of the arrowleft element did not seem to work. I have commented out this line of code which did not work. However, the arrowcolor option of the leftarrow element does work. To adjust the label element's font size, the ttk.Style().configuration method was used.

测试脚本中的方法 2 演示了我的问题的解决方案.

Approach 2 in Test Script demonstrates the solution to my question.

测试代码:

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')

这篇关于如何在 tkinter.ttk.Button 中创建箭头并控制它的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！