无法对齐 ttk 小部件

如何解决无法对齐 ttk 小部件

我无法在以下简单的应用程序中正确对齐 ttk 小部件。

from tkinter import *
from tkinter import ttk

class App:
    def __init__(self,root):
        self.frames = []
        self.entries = []
        self.root = root
        self.root.title("Trajectories")
        
        self.FOPTIONS = ['A','B','C','D']
        self.LSOURCE = StringVar()
        self.LSOURCE.set(self.FOPTIONS[0])
        self.FINDX = Intvar()
        self.FLIST = ['0']
    
        ttk.Style().configure("TFrame",padding=6,relief="flat",background="#ccc")
        
        #F0 = ttk.Frame(self.root,padding=5)
        
        ttk.Button(self.root,text='Import').grid(row=0,column=0,padx=5,sticky="w")
        ttk.ComboBox(self.root,textvariable=self.LSOURCE,values=self.FOPTIONS).grid(row=0,column=1,sticky="w") 
    
        F1 = ttk.Frame(self.root,padding=5)
        # Labels row
        ttk.Label(F1,text='Number').grid(row=0,column=0)
        ttk.Label(F1,text='File').grid(row=0,column=1)
        ttk.Label(F1,text='Alias').grid(row=0,column=2)
        ttk.Label(F1,text='Crop').grid(row=0,column=3)
        ttk.Label(F1,text='Show').grid(row=0,column=4)
        
        # Fields row
        ttk.ComboBox(F1,textvariable=self.FINDX,values=self.FLIST,width=5).grid(row=1,column=0) # File
        ttk.Entry(F1,width=50).grid(row=1,padx=3,sticky='w')
        ttk.Entry(F1,width=15).grid(row=1,column=2,sticky='w') # Alias
        ttk.Checkbutton(F1).grid(row=1,column=3,sticky='we') # Crops
        ttk.Checkbutton(F1).grid(row=1,column=4,sticky='we')  # Show
        
        F1.grid(row=1,columnspan=2) 
        
        Button(self.root,text="Create",command=self.draw).grid(row=2,columnspan=2)
        
    def draw(self):
        print("Draw pressed")

root = Tk()
App(root)
root.mainloop()

问题在于：

(i) 与第一个 ttk.ComboBox() 和

(ii) Checkbuttons() 在“裁剪”和“显示”标签下。我尝试了很多策略，但是：

我无法将 ttk.ComboBox() 完全靠左对齐，靠近“导入”按钮。
Checkbuttons() 没有文字，也没有相对于上一行中的标签居中。

理想的情况应该类似于下图。

我尝试了一些将第一行封装到框架中的变体，但没有任何变化。带有标签的第二行和带有字段的第三行被封装在一个框架内，只是为了对可变数量的附加行进行分组。使用粘性值的更改没有产生任何效果。只是我不明白在这个例子中 grid() 是如何以这种方式工作的，为什么 ComboBox 没有向左对齐（“w”）以及为什么 "ew" 没有在单元格内居中 Checkbuttons()。

如果我尝试将“导入”按钮网格化为 (row=0,sticky="w") 和 ttk.ComboBox().grid(row=0,sticky="w") 在我得到的评论之一中建议：

解决方法

最后的解决方案（虽然不是 100% 满足）是将第一行封装到一个框架中，并使用 tk.Checkbutton() 而不是 ttk.Checkbutton() 作为复选框。

testDrag({ type: MyType.DRAG,dragProp: "hello" }) // It's a drag,dragProp is HELLO
testDrag({ type: MyType.STD,stdProp: "goodbye" }) // It's not a drag

并使用 tk 而不是 tkk 小部件用于 Checkbutton

F0 = ttk.Frame(self.root)       
ttk.Button(F0,text='Import').grid(row=0,column=0,padx=5,sticky="w")
ttk.Combobox(F0,.....).grid(row=0,column=1,sticky="w") 
F0.grid(row=0,sticky="w")

在我看来，很奇怪 ttk 没有正确遵守“粘性”行为（可能是错误？）。

组合框不在导入按钮右侧的原因是第 0 列比您想象的要宽。如果您暂时注释掉 F1.grid(row=1,columnspan=2)

，您可以看到组合框正对着按钮

之所以这么宽，是因为您将 F1 放在第 0 列并使其跨越两列，因此根据定义，第 0 列和第 1 列加在一起必须与 F1 一样宽。

一个简单的解决方案是让第三列是空的，并让它占据额外的空间。通过让 F1 跨越三列并为第三列赋予非零权重来实现这一点。然后该列将获得所有额外空间，因此第 0 列和第 1 列将仅与该列中最大的项一样大。

复选按钮的问题很简单，无论您是否有标签，标签都有空间，因此实际的复选框向左偏移。由于您使用的是 ttk Checkbutton，如果您希望复选按钮居中，您可以从该小部件的样式布局中完全删除标签。

它应该看起来像这样：

ttk.Style().layout("CustomCheckbutton",[('Checkbutton.button',{'sticky': 'nswe'})])
...
ttk.Checkbutton(F1,style="CustomCheckbutton").grid(row=1,column=3) # Crops
ttk.Checkbutton(F1,column=4)  # Show