Tkinter网格布局中Button 1与Button 2间出现间隙的问题排查

我搭建了包含顶部框架与底部框架的grid布局系统，顶部框架东侧的按钮本应排列整齐，但Button 1与Button 2之间出现了间隙，这是计算机科学2课程期末项目的前置准备，希望得到解决建议。

问题界面截图：

原代码如下：

import tkinter as tk
from tkinter import ttk

class App(tk.Tk):
    def __init__(self):
        super().__init__()

        self.geometry("1000x600+0+0")
        self.title('Amazon Scraper')
        self.resizable(True,True)

        # configure the grid
        self.columnconfigure(0, weight=5)
        self.rowconfigure(0,weight=1)
        self.rowconfigure(1,weight=3)

        self.create_widgets()

    def create_widgets(self):
        search=tk.StringVar()
        filter_search= tk.StringVar()
        
        topFrame=tk.Frame(self, bg='red')
        topFrame.columnconfigure(0,weight=3)
        topFrame.columnconfigure(1,weight=1)
        topFrame.grid(column=0,row=0,sticky='nesw')
        
        tabControl = ttk.Notebook(topFrame)
        tab1 = ttk.Frame(tabControl)
        tab2 = ttk.Frame(tabControl)
        tabControl.add(tab1, text ='Search')
        tabControl.add(tab2, text ='Filter')
        tabControl.grid(column=0,row=0,columnspan=1, sticky='nesw')
        
        label1=tk.Label(tab1, text="Search").grid(column=0,row=0, sticky='nesw', padx=2,pady=2)
        label2=tk.Label(tab2, text="Filter").grid(column=0, row=0,sticky='nesw',padx=2,pady=2)

        entry1=tk.Entry(tab1, width=30,bg='light blue', textvariable=search).grid(column=1,row=0,sticky='nesw',padx=2,pady=2)
        entry2=tk.Entry(tab2, width=30,bg='light blue', textvariable=filter_search).grid(column=1,row=0,sticky='nesw',padx=2,pady=2)

        btn1=tk.Button(topFrame, text='Button 1', bg='light blue').grid(column=1,row=0,sticky='ne',padx=2,pady=1)
        btn2=tk.Button(topFrame, text='Button 2', bg='light blue').grid(column=1,row=1,sticky='ne',padx=2,pady=1)
        btn3=tk.Button(topFrame, text='Button 3', bg='light blue').grid(column=1,row=2,sticky='ne',padx=2,pady=1)
        btn4=tk.Button(topFrame, text='Button 4', bg='light blue').grid(column=1,row=3,sticky='ne',padx=2,pady=1)

        bottomeFrame=tk.Frame(self, bg='green')
        bottomeFrame.columnconfigure(0,weight=3)
        bottomeFrame.grid(column=0,row=1,sticky='nesw')
        
        for i in range(5):
            label5=tk.Label(bottomeFrame, text=f'{i}: Label', bg='light blue').grid(column=0,row=i, columnspan=2, sticky='nesw')
if __name__ == "__main__":
    app = App()
    app.mainloop()

问题原因 #

间隙出现是因为tabControl占据了topFrame的第0行，且设置了sticky='nesw'，再加上topFrame的第0行配置了权重，导致该行在窗口拉伸时会占据topFrame的全部垂直空间。Button 1放在第0行，Button 2放在第1行，两行之间被拉伸的空间撑开，形成了间隙。

解决方案 #

方案一：将按钮放入独立框架（推荐）

把按钮统一放到一个垂直框架里，再将这个框架放到topFrame的第1列，隔离tabControl的布局影响，让按钮在独立空间内垂直排列：

修改按钮部分代码：

# 创建按钮容器框架
btn_frame = tk.Frame(topFrame, bg='red')
btn_frame.grid(column=1, row=0, sticky='ns')
# 配置按钮框架的行权重，让按钮垂直均匀分布
for i in range(4):
    btn_frame.rowconfigure(i, weight=1)
# 放置按钮
btn1=tk.Button(btn_frame, text='Button 1', bg='light blue').grid(column=0,row=0,sticky='ne',padx=2,pady=1)
btn2=tk.Button(btn_frame, text='Button 2', bg='light blue').grid(column=0,row=1,sticky='ne',padx=2,pady=1)
btn3=tk.Button(btn_frame, text='Button 3', bg='light blue').grid(column=0,row=2,sticky='ne',padx=2,pady=1)
btn4=tk.Button(btn_frame, text='Button 4', bg='light blue').grid(column=0,row=3,sticky='ne',padx=2,pady=1)

方案二：限制tabControl的垂直拉伸

修改tabControl的grid参数，去掉sticky中的s，让它只占据顶部空间，不拉伸到底部：

tabControl.grid(column=0,row=0,columnspan=1, sticky='new')

修改后的完整代码（方案一） #

import tkinter as tk
from tkinter import ttk

class App(tk.Tk):
    def __init__(self):
        super().__init__()

        self.geometry("1000x600+0+0")
        self.title('Amazon Scraper')
        self.resizable(True,True)

        # configure the grid
        self.columnconfigure(0, weight=5)
        self.rowconfigure(0,weight=1)
        self.rowconfigure(1,weight=3)

        self.create_widgets()

    def create_widgets(self):
        search=tk.StringVar()
        filter_search= tk.StringVar()
        
        topFrame=tk.Frame(self, bg='red')
        topFrame.columnconfigure(0,weight=3)
        topFrame.columnconfigure(1,weight=1)
        topFrame.grid(column=0,row=0,sticky='nesw')
        topFrame.rowconfigure(0, weight=1)
        
        tabControl = ttk.Notebook(topFrame)
        tab1 = ttk.Frame(tabControl)
        tab2 = ttk.Frame(tabControl)
        tabControl.add(tab1, text ='Search')
        tabControl.add(tab2, text ='Filter')
        tabControl.grid(column=0,row=0,columnspan=1, sticky='nesw')
        
        label1=tk.Label(tab1, text="Search").grid(column=0,row=0, sticky='nesw', padx=2,pady=2)
        label2=tk.Label(tab2, text="Filter").grid(column=0, row=0,sticky='nesw',padx=2,pady=2)

        entry1=tk.Entry(tab1, width=30,bg='light blue', textvariable=search).grid(column=1,row=0,sticky='nesw',padx=2,pady=2)
        entry2=tk.Entry(tab2, width=30,bg='light blue', textvariable=filter_search).grid(column=1,row=0,sticky='nesw',padx=2,pady=2)

        # 创建按钮容器框架
        btn_frame = tk.Frame(topFrame, bg='red')
        btn_frame.grid(column=1, row=0, sticky='ns')
        # 配置按钮框架的行权重，让按钮垂直分布均匀
        for i in range(4):
            btn_frame.rowconfigure(i, weight=1)
        # 放置按钮
        btn1=tk.Button(btn_frame, text='Button 1', bg='light blue').grid(column=0,row=0,sticky='ne',padx=2,pady=1)
        btn2=tk.Button(btn_frame, text='Button 2', bg='light blue').grid(column=0,row=1,sticky='ne',padx=2,pady=1)
        btn3=tk.Button(btn_frame, text='Button 3', bg='light blue').grid(column=0,row=2,sticky='ne',padx=2,pady=1)
        btn4=tk.Button(btn_frame, text='Button 4', bg='light blue').grid(column=0,row=3,sticky='ne',padx=2,pady=1)

        bottomeFrame=tk.Frame(self, bg='green')
        bottomeFrame.columnconfigure(0,weight=3)
        bottomeFrame.grid(column=0,row=1,sticky='nesw')
        
        for i in range(5):
            label5=tk.Label(bottomeFrame, text=f'{i}: Label', bg='light blue').grid(column=0,row=i, columnspan=2, sticky='nesw')
if __name__ == "__main__":
    app = App()
    app.mainloop()

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