对齐 ttk 小部件的问题答案

【问题标题】：Troubles aligning ttk widget对齐 ttk 小部件的问题
【发布时间】：2021-04-01 03:34:49
【问题描述】：

我无法在下面的简单应用程序中正确对齐 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,column=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,column=0,columnspan=2) 
        
        Button(self.root, text="Create",command=self.draw).grid(row=2,column=0,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,column=0,sticky="w") ttk.Combobox().grid(row=0,column=0,sticky="w") 正如我得到的其中一个 cmets 中所建议的那样：

【问题讨论】：

尝试将组合框的grid() 更改为grid(row=0,column=0)。我不太明白你所说的“Checkbuttons() are without text”是什么意思。你没有给它任何文本，那你为什么期望它显示任何文本呢？
我的意思是没有带有参数“text”的标签
如果我执行 Combobox().grid(row=0,column=0) 按钮“导入”和 Combobox 出现重叠！
更引人注目的是，如果我改用 tk 版本，那么复选框将正确居中！！！
我不认为按钮和组合框会重叠，因为按钮设置在单元格的西边，另一半将被组合框占用。

标签： python tkinter ttkwidgets

【解决方案1】：

最后的解决方案（虽然不是 100% 满意）是将第一行封装到一个框架中，并使用 tk.Checkbutton() 而不是 ttk.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,column=0,sticky="w")

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

# ttk.Checkbutton(F1).grid(row=1,column=3,sticky='we')
tk.Checkbutton(F1).grid(row=1,column=3,sticky='we')

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

【讨论】：

这不是错误。我不能 100% 确定您指的是什么，但网格几何管理器已经存在了几十年，如果其中有错误，几年前就会有人发现它。
可能你是对的，但只要尝试一下 tk 和 ttk 版本之间的区别，就像我在这里报告的情况一样，你会发现它们的反应不同，这并不意味着所有 ttk 小部件都有这个问题.在我看来，这不是 grid() 的问题，而是 ttk.Checkbutton() 实现它的方式。
ttk.Checkbutton 没有单独的 grid 实现 - 所有小部件共享相同的实现。
拜托，任何提示如何通过样式布局抑制标签空间？我没有找到怎么做？

【解决方案2】：

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

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

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

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

它应该看起来像这样：

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

【讨论】：