【问题标题】：Tkinter Grid Problem - Frames not alignedTkinter 网格问题 - 帧未对齐
【发布时间】：2021-01-12 05:35:16
【问题描述】：

我刚开始使用 tkinter，但我仍在努力适应它的工作方式。我正在尝试准备某种包含 4 个部分的网格菜单。

顶部有一帧带有应用程序的标题，左侧有一帧带有一些用于配置应用程序的按钮，然后是其余 4 个大小相同的帧。

我这里的主要问题是左框架和其他四个之间的空白列，我该如何调整它以便 4 个方块填充那个空间？

见下方代码：

import datetime
import tkinter as tk
from time import strftime

window = tk.Tk()
window.geometry("1400x800")
window.configure(bg="white")
window.rowconfigure(20,weight=1)
window.columnconfigure(35,weight=1)
window.title("Hello World App")
entry_var_server = tk.StringVar(window,"")
entry_var_db = tk.StringVar(window,"")
entry_var_driver = tk.StringVar(window,"")


def window_widgets():
    db_ini_frame_top = tk.Frame(master=window,bg="#57b956",height=120,width=1400,highlightbackground="black",highlightthickness=2)
    db_ini_frame_top.grid(rowspan=3,columnspan=34,sticky="w")

    db_ini_label_top = tk.Label(master=window,text="Hello World",bg="#57b956")
    db_ini_label_top.configure(font=("Calibri",26))
    db_ini_label_top.grid(row=1,column=18,sticky="n")

    def cur_date(dic = {'01':'st','21':'st','31':'st',
                    '02':'nd','22':'nd',
                    '03':'rd','23':'rd'}):
        x = strftime('%A,  %B %d')
        return x + dic.get(x[-2:],'th')+strftime(" %G - %H:%M")

    date = cur_date()
    db_ini_date = tk.Label(master=window,text=date,bg="#57b956")
    db_ini_date.configure(font=("Calibri",12))
    db_ini_date.grid(row=0,column=0,sticky="w")

    db_ini_frame_left = tk.Frame(master=window,bg="light grey",height=800,width=120,colormap="new",highlightbackground="black",highlightthickness=2)
    db_ini_frame_left.grid(row=3,rowspan=16,columnspan=2,sticky="w")

    db_ini_frame_center_nw = tk.Frame(master=window,height=350,width=640,bg="blue")
    db_ini_frame_center_nw.grid(row=3,column=3,columnspan=16,rowspan=12,sticky="nw")

    db_ini_frame_center_sw = tk.Frame(master=window,height=450,width=640,bg="light blue")
    db_ini_frame_center_sw.grid(row=12,column=3,columnspan=16,rowspan=12,sticky="sw")

    db_ini_frame_center_ne = tk.Frame(master=window,height=350,width=640,bg="light blue")
    db_ini_frame_center_ne.grid(row=3,column=19,columnspan=16,rowspan=12,sticky="ne")

    db_ini_frame_center_se = tk.Frame(master=window,height=450,width=640,bg="blue")
    db_ini_frame_center_se.grid(row=12,column=19,columnspan=16,rowspan=12,sticky="se")

window_widgets()
window.tk.mainloop()

【问题讨论】：

请提供一个minimal reproducible example，这意味着其中没有所有其他内容，例如pandas、Pil、sqlalchemy、tkintertable 等（可能没有任何内容）解决问题）。

标签： python tkinter grid

【解决方案1】：

日期字段位于单个列中，因此它将下一列推到右侧。

更新您的日期块并添加columnspan=4

date = cur_date()
db_ini_date = tk.Label(master=window,text=date,bg="#57b956")
db_ini_date.configure(font=("Calibri",12))
db_ini_date.grid(row=0,column=0,columnspan=4,sticky="w")   # Allow 4 columns for date

输出

【讨论】：

快速简单。我不知道我以前怎么看不到它，非常感谢！
虽然这可以解决眼前的问题，但并不能解决所有问题。进行此更改后尝试调整窗口大小。你会有一些难看的空白。

【解决方案2】：

虽然我们只需进行几处小改动即可修复您的代码，但花几分钟时间创建更智能的布局将使随着应用程序的增长修改您的代码变得更加容易。

我将就如何重组您的代码提供一些建议。答案的最后是一个最终的工作示例。其中 90% 是您的原始代码，但在各处进行了一些调整，以便更轻松地创建 UI。

不要在任何事情上都使用`grid`

首先，我建议您不要对所有内容都使用grid。这对创建网格很有用，但有时有更好的方法来布置整个窗口。将您的 UI 划分为逻辑分组，然后使用这些分组对它们进行布局。

通过将用户界面组织成多个部分，可以更轻松地修改单个部分。当您对所有内容都使用grid 时，进行一个小的更改可能需要您更改十几行代码，您必须在其中调整行号和列号，以及所有内容的行和列跨度，以适应一个新的小部件。

将布局代码组合在一起

我还建议您将对 grid 和 pack 的调用组合在一起，而不是将它们散布在整个代码中。我发现它使布局可视化变得更加容易，并且更容易进行更改，因为所有相关的更改都彼此靠近而不是分散开来。

将 UI 划分为逻辑部分

您显然有三个不同的区域：顶部的标题，左侧的一些按钮，然后是其他所有区域。所以，从创建它开始。 pack 可以说是您在空间两侧布置东西时的最佳选择。

因此，首先为这三个区域创建框架。然后，您可以使用 pack 根据您的描述将它们沿边缘对齐。

db_ini_frame_top = tk.Frame(master=window, ...)
db_ini_frame_left = tk.Frame(master=window, ...)
db_ini_main = tk.Frame(master=window, ...)

db_ini_frame_top.pack(side="top", fill="x")
db_ini_frame_left.pack(side="left", fill="y")
db_ini_main.pack(side="top", fill="both", expand=True)

在这些容器中放置其他小部件

即使您在顶部创建了一个框架，您也将标签和日期放在了根窗口中。您应该将它们放在框架内。当您开始添加按钮时，它们应该位于左侧框架中。最后，对于其他四个窗口，它们需要进入第三帧。

db_ini_label_top = tk.Label(master=db_ini_frame_top, ...)
db_ini_date = tk.Label(master=db_ini_frame_top, ...)

db_ini_frame_center_nw = tk.Frame(master=db_ini_main, ...)
db_ini_frame_center_sw = tk.Frame(master=db_ini_main, ...)
db_ini_frame_center_ne = tk.Frame(master=db_ini_main, ...)
db_ini_frame_center_se = tk.Frame(master=db_ini_main, ...)

将`grid` 用于实际位于网格中的四个帧

当使用grid 时，经验法则是您应该至少给一行和一列赋予权重，以便grid 知道如何处理窗口增大或缩小时的额外空间。在您的情况下，您希望所有四个单元格都相等，因此您应该赋予它们相同的权重。

因为您现在只对这四个窗口使用网格，而不是试图将所有内容强制放入一个网格中，所以您可以使用有意义的行号和列号（即：第 0 行和第 1 行，第 0 和第 1 列，而不是人为的大行、列和跨度）。

db_ini_frame_center_nw = tk.Frame(master=db_ini_main,height=350,width=640,bg="blue")
db_ini_frame_center_sw = tk.Frame(master=db_ini_main,height=450,width=640,bg="light blue")
db_ini_frame_center_ne = tk.Frame(master=db_ini_main,height=350,width=640,bg="light blue")
db_ini_frame_center_se = tk.Frame(master=db_ini_main,height=450,width=640,bg="blue")

db_ini_main.grid_rowconfigure((0,1), weight=1)
db_ini_main.grid_columnconfigure((0,1), weight=1)

db_ini_frame_center_nw.grid(row=0,column=0, sticky="nsew")
db_ini_frame_center_sw.grid(row=0,column=1, sticky="nsew")
db_ini_frame_center_ne.grid(row=1,column=0, sticky="nsew")
db_ini_frame_center_se.grid(row=1,column=1, sticky="nsew")

这就是您的完整代码的样子。我没有调整标题区域中文本的位置，但是很容易改变它而不影响GUI的其他区域。

另外，请注意，您可以手动调整窗口大小，一切都会适当地增长或缩小，而不是留下空白。

import datetime
import tkinter as tk
from time import strftime

window = tk.Tk()
window.geometry("1400x800")
window.configure(bg="white")
window.rowconfigure(20,weight=1)
window.columnconfigure(35,weight=1)
window.title("Hello World App")
entry_var_server = tk.StringVar(window,"")
entry_var_db = tk.StringVar(window,"")
entry_var_driver = tk.StringVar(window,"")


def window_widgets():
    db_ini_frame_top = tk.Frame(master=window,bg="#57b956",height=120,width=1400,highlightbackground="black",highlightthickness=2)
    db_ini_frame_left = tk.Frame(master=window,bg="light grey",height=800,width=120,colormap="new",highlightbackground="black",highlightthickness=2)
    db_ini_main = tk.Frame(master=window,bg="light grey",height=800,width=120,colormap="new",highlightbackground="black",highlightthickness=2)

    db_ini_frame_top.pack(side="top", fill="x")
    db_ini_frame_left.pack(side="left", fill="y")
    db_ini_main.pack(side="top", fill="both", expand=True)

    db_ini_label_top = tk.Label(master=db_ini_frame_top,text="Hello World",bg="#57b956")
    db_ini_label_top.configure(font=("Calibri",26))
    db_ini_label_top.grid(row=1,column=18,sticky="n")

    def cur_date(dic = {'01':'st','21':'st','31':'st',
                    '02':'nd','22':'nd',
                    '03':'rd','23':'rd'}):
        x = strftime('%A,  %B %d')
        return x + dic.get(x[-2:],'th')+strftime(" %G - %H:%M")

    date = cur_date()
    db_ini_date = tk.Label(master=db_ini_frame_top,text=date,bg="#57b956")
    db_ini_date.configure(font=("Calibri",12))
    db_ini_date.grid(row=0,column=0,sticky="w")

    db_ini_frame_center_nw = tk.Frame(master=db_ini_main,height=350,width=640,bg="blue")
    db_ini_frame_center_sw = tk.Frame(master=db_ini_main,height=450,width=640,bg="light blue")
    db_ini_frame_center_ne = tk.Frame(master=db_ini_main,height=350,width=640,bg="light blue")
    db_ini_frame_center_se = tk.Frame(master=db_ini_main,height=450,width=640,bg="blue")

    db_ini_main.grid_rowconfigure((0,1), weight=1)
    db_ini_main.grid_columnconfigure((0,1), weight=1)

    db_ini_frame_center_nw.grid(row=0,column=0, sticky="nsew")
    db_ini_frame_center_sw.grid(row=0,column=1, sticky="nsew")
    db_ini_frame_center_ne.grid(row=1,column=0, sticky="nsew")
    db_ini_frame_center_se.grid(row=1,column=1, sticky="nsew")


window_widgets()
window.tk.mainloop()