使用tkinter的.grid()方法出现未设置的组件间距问题

问题原因 #

1. 行间距过大：第一行的Entry、Button等组件默认高度高于第二行的Radiobutton，Grid布局会让每行高度适配该行最高组件，再加上组件自带内边距和Grid默认间距，就会放大行间距。
2. 列间空隙：第一行用到了列0到列5，第二行仅用到列0到列2，Frame宽度会适配第一行总列宽，导致第二行单选框右侧出现空白；同时Grid默认列间距也会让组件间产生空隙。

具体解决步骤 #

1. 消除行间距 #

给第二行的Radiobutton添加sticky="nsew"参数，让组件垂直填充单元格，同时设置pady=0去除额外行间距：

ttk.Radiobutton(self, text='Pencil', value=0, variable=self.root.tool).grid(row=1, column=0, sticky="nsew", pady=0, padx=2)
ttk.Radiobutton(self, text='Floodfill', value=1, variable=self.root.tool).grid(row=1, column=1, sticky="nsew", pady=0, padx=2)
ttk.Radiobutton(self, text='Eyedropper', value=2, variable=self.root.tool).grid(row=1, column=2, sticky="nsew", pady=0, padx=2)

2. 调整列间距与右侧空白 #

• 给第一行所有组件统一设置padx参数，精准控制列间间距；
• 给常用列（0-2）设置权重，让它们分配可用空间，避免右侧空白过度突兀：

# 给列0-2设置权重，分配可用空间
for col in range(3):
    self.grid_columnconfigure(col, weight=1)

# 第一行组件统一设置padx
ttk.Label(self, text="Hex color:").grid(row=0, column=0, padx=2)
self.symbol_entry.grid(row=0, column=1, padx=2)
self.c.grid(column=2, row=0, padx=2)
ttk.Button(self, text='Random').grid(column=3, row=0, padx=2)
ttk.Button(self, text='Load').grid(column=4, row=0, padx=2)
ttk.Button(self, text='Save').grid(column=5, row=0, padx=2)

3. 可选：固定Frame尺寸 #

如果需要严格固定布局，可禁用Frame的自动尺寸调整，手动设置宽高：

class TopMenu(tk.Frame):
    def __init__(self, master: MainWindow):
        tk.Frame.__init__(self, master)
        self.root = master
        # 禁用自动尺寸调整
        self.grid_propagate(False)
        # 手动设置Frame宽高（根据实际组件尺寸调整）
        self.config(width=400, height=60)
        # ... 其余代码

修改后的完整代码 #

import tkinter as tk
from string import hexdigits
from tkinter import ttk
from random import choices

color_hex = '#C91212'

class MainWindow(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title('Main window')
        self.tool = tk.IntVar(value=0)
        self.topmenu = TopMenu(self)
        self.topmenu.pack()

class TopMenu(tk.Frame):
    def __init__(self, master: MainWindow):
        tk.Frame.__init__(self, master)
        self.root = master
        
        # 给列0-2设置权重，分配可用空间
        for col in range(3):
            self.grid_columnconfigure(col, weight=1)
        
        # 第一行组件，统一设置padx控制间距
        ttk.Label(self, text="Hex color:").grid(row=0, column=0, padx=2)

        self.symbol_entry_text = tk.StringVar(value=color_hex)
        self.symbol_entry = ttk.Entry(self, textvariable=self.symbol_entry_text)
        self.symbol_entry.grid(row=0, column=1, padx=2)

        ttk.Button(self, text='Random').grid(column=3, row=0, padx=2)
        ttk.Button(self, text='Load').grid(column=4, row=0, padx=2)
        ttk.Button(self, text='Save').grid(column=5, row=0, padx=2)

        self.c = tk.Canvas(self, width=21, height=21, highlightthickness=0, bg=color_hex)
        self.c.grid(column=2, row=0, padx=2)
        
        # 第二行单选框，设置sticky填充行高，pady=0消除行间距，padx控制列间距
        ttk.Radiobutton(self, text='Pencil', value=0, variable=self.root.tool).grid(row=1, column=0, sticky="nsew", pady=0, padx=2)
        ttk.Radiobutton(self, text='Floodfill', value=1, variable=self.root.tool).grid(row=1, column=1, sticky="nsew", pady=0, padx=2)
        ttk.Radiobutton(self, text='Eyedropper', value=2, variable=self.root.tool).grid(row=1, column=2, sticky="nsew", pady=0, padx=2)

if __name__ == "__main__":
    app = MainWindow()
    app.mainloop()

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