Tkinter布局问题：添加组件后如何避免其他组件位置偏移？

在开发Tkinter单词管理界面时，添加更新单词的标签、输入框和提交按钮后，原本的「Set words」「Delete words」按钮出现左移，破坏了原有布局。

问题代码 #

def check():
    for widget in root.winfo_children():
        widget.destroy()

    button_exit = ttk.Button(root, text='<-----', command=main_window)
    button_exit.grid(row=1, column=2, padx=1, pady=1, sticky='nsew')

    set_word = ttk.Button(root, text='Set words', command=on_list_click_set)
    set_word.grid(row=2, column=2, padx=10, pady=10)

    delete_word = ttk.Button(root, text='Delete words', command=on_list_click_delete)
    delete_word.grid(row=4, column=1, columnspan=3, padx=10, pady=10)

    for i in range(1, 20):
        root.columnconfigure(i, weight=1)

    for i in range(1, 20):
        root.rowconfigure(i, weight=1)

    scrollbar = ttk.Scrollbar(root)
    scrollbar.grid(row=2, column=20, rowspan=19, sticky='nsew')

    mylist = tk.Listbox(root, yscrollcommand=scrollbar.set, selectbackground="#a6a6a6",
                        selectforeground="black", exportselection=False, height=19, selectmode="single",
                        bg="#f0f0f0", relief="flat", bd=0, font=('Helvetica', 15))

    c.execute('SELECT * FROM words')
    conn.commit()

    for line in c.fetchall():
        mylist.insert(0, line[0])

    mylist.grid(row=2, column=19, rowspan=19, sticky='nsew')
    scrollbar.config(command=mylist.yview)

    root.update_idletasks()  # Update the layout immediately

    label_change_word = ttk.Label(root, text='Which word would you like your words to be updated to?',
                                  font=('Helvetica', 13))
    label_change_word.grid(row=1, columnspan=3, column=6, sticky='w')

    changing_word_entry = ttk.Entry(root, font=('Helvetica', 15))
    changing_word_entry.grid(row=2, columnspan=2, column=5)

    changing_word_submit = ttk.Button(root, text='Submit')
    changing_word_submit.grid(row=2, column=7)


# Rest of your code...

问题根源 #

Tkinter的grid布局基于列和行的空间分配计算：

1. 你给column1到19都设置了weight=1，意味着这些列会平分窗口可用宽度；
2. 新增的更新控件占据了column5、6、7的位置，让这些列产生实际宽度，挤压了左侧column1-4的空间；
3. 原本在column2的「Set words」按钮和覆盖column1-3的「Delete words」按钮，因左侧列空间被压缩而左移。

解决办法 #

办法1：把更新控件移到不影响左侧的区域

直接把更新相关控件放在Listbox右侧的列（比如从column21开始），避免占用左侧按钮的列范围：

# 修改更新控件的grid位置参数
label_change_word.grid(row=1, columnspan=3, column=21, sticky='w')
changing_word_entry.grid(row=2, columnspan=2, column=21)
changing_word_submit.grid(row=2, column=23)

# 给新增的列设置权重，保证布局自适应
for i in range(21,24):
    root.columnconfigure(i, weight=1)

办法2：用Frame分组隔离布局

把左侧按钮、更新控件、列表区域分别放在独立的Frame里，各自管理内部布局，互不干扰，这是更规范的Tkinter布局方式：

def check():
    for widget in root.winfo_children():
        widget.destroy()

    # 左侧按钮容器
    left_frame = ttk.Frame(root)
    left_frame.grid(row=1, column=1, rowspan=20, sticky='nsew')
    root.columnconfigure(1, weight=1)

    button_exit = ttk.Button(left_frame, text='<-----', command=main_window)
    button_exit.grid(row=1, column=1, padx=1, pady=1, sticky='nsew')

    set_word = ttk.Button(left_frame, text='Set words', command=on_list_click_set)
    set_word.grid(row=2, column=1, padx=10, pady=10)

    delete_word = ttk.Button(left_frame, text='Delete words', command=on_list_click_delete)
    delete_word.grid(row=4, column=1, padx=10, pady=10)

    left_frame.columnconfigure(1, weight=1)

    # 顶部更新控件容器
    update_frame = ttk.Frame(root)
    update_frame.grid(row=1, column=2, rowspan=2, sticky='nsew')
    root.columnconfigure(2, weight=2)

    label_change_word = ttk.Label(update_frame, text='要更新成哪个单词？',
                                  font=('Helvetica', 13))
    label_change_word.grid(row=1, column=1, columnspan=3, sticky='w')

    changing_word_entry = ttk.Entry(update_frame, font=('Helvetica', 15))
    changing_word_entry.grid(row=2, column=1, columnspan=2, padx=5, pady=5)

    changing_word_submit = ttk.Button(update_frame, text='提交')
    changing_word_submit.grid(row=2, column=3, padx=5, pady=5)

    for i in range(1,4):
        update_frame.columnconfigure(i, weight=1)

    # 右侧列表容器
    list_frame = ttk.Frame(root)
    list_frame.grid(row=3, column=2, rowspan=18, sticky='nsew')

    scrollbar = ttk.Scrollbar(list_frame)
    scrollbar.grid(row=1, column=2, sticky='nsew')

    mylist = tk.Listbox(list_frame, yscrollcommand=scrollbar.set, selectbackground="#a6a6a6",
                        selectforeground="black", exportselection=False, height=19, selectmode="single",
                        bg="#f0f0f0", relief="flat", bd=0, font=('Helvetica', 15))

    c.execute('SELECT * FROM words')
    conn.commit()

    for line in c.fetchall():
        mylist.insert(0, line[0])

    mylist.grid(row=1, column=1, sticky='nsew')
    scrollbar.config(command=mylist.yview)

    list_frame.columnconfigure(1, weight=1)

    # 设置root的行权重
    for i in range(1, 20):
        root.rowconfigure(i, weight=1)

办法3：调整列权重固定左侧按钮位置

给左侧列（1-4）设置weight=0，让它们不会被挤压，同时给按钮设置sticky参数固定位置：

# 修改Set words按钮的grid参数，固定靠右
set_word.grid(row=2, column=2, padx=10, pady=10, sticky='e')

# 调整列权重：左侧列不分配额外空间，右侧列平分
for i in range(1,5):
    root.columnconfigure(i, weight=0)
for i in range(5,20):
    root.columnconfigure(i, weight=1)

内容的提问来源于Stack Exchange，提问作者Rauf İlyai