使用框架和网格的 tkinter gui 布局 [英] tkinter gui layout using frames and grid
问题描述
我的
所以我假设有一些我不明白的基础知识.
我假设框架包含它们自己的网格空间"(行、列)，但我看到的行为并不支持这一点，而且我对让顶部框架按照我想要的方式工作感到茫然.我的标签应该在 L 到 R 的同一行上，在跨越整个框架的框架标签"下——除非它们没有.我想让实际看起来更像目标 jpg，我想用网格来做.
您只能看到绿框右侧的输入字段之一.为什么要去那里?
from Tkinter import *根 = Tk()root.title('模型定义')root.resizable(宽度=假，高度=假)root.geometry('{}x{}'.format(460, 350))top_frame = Frame(root, bg='cyan', width = 450, height=50, pady=3).grid(row=0, columnspan=3)标签(top_frame, text = 'Model Dimensions').grid(row = 0, columnspan = 3)标签(top_frame, text = 'Width:').grid(row = 1, column = 0)标签(top_frame, text = 'Length:').grid(row = 1, column = 2)entry_W = Entry(top_frame).grid(row = 1, column = 1)entry_L = Entry(top_frame).grid(row = 1, column = 3)#Label(top_frame, text = '').grid(row = 2, column = 2)center = Frame(root, bg='gray2', width=50, height=40, padx=3, pady=3).grid(row=1, columnspan=3)ctr_left = Frame(center, bg='blue', width=100, height=190).grid(column = 0, row = 1, rowspan = 2)ctr_mid = Frame(center, bg='yellow', width=250, height=190, padx=3, pady=3).grid(column = 1, row=1, rowspan=2)ctr_right = Frame(center, bg='green', width=100, height=190, padx=3, pady=3).grid(column = 2, row=1, rowspan=2)btm_frame = Frame(root, bg='white', width = 450, height = 45, pady=3).grid(row = 3, columnspan = 3)btm_frame2 = Frame(root, bg='lavender', width = 450, height = 60, pady=3).grid(row = 4, columnspan = 3)root.mainloop()具体来说，我的标签和 Entry 小部件去了哪里，我如何让它们看起来更像目标(顶部框架，其余部分用于稍后).
我假设框架包含它们自己的网格空间"
这是一个正确的假设.
<块引用>您只能看到绿色右侧的输入字段之一框架.为什么要去那里?
问题从这里开始:
top_frame = Frame(root, ...).grid(row=0, ...)在 python 中，x = y().z() 总是将 x 设置为 .z() 的结果.在 top_frame = Frame(...).grid(...) 的情况下，grid(...) 总是返回 None所以 top_frame 将是 None.这会导致您认为进入顶部框架的每个小部件实际上进入根窗口.
解决方案概述
作为一般经验法则，您永远不应将 grid、pack 或 place 作为创建小部件的同一语句的一部分.部分是因为您正在经历这种确切的行为，但也因为我认为随着时间的推移，它会使您的代码更难编写和维护.
小部件创建和小部件布局是两件不同的事情.根据我的经验，当您将布局命令组合在一起时，布局问题更容易调试.
此外，您在使用 grid 时应该保持一致，并始终将选项按相同的顺序排列，以便您可以更轻松地可视化布局.最后，在使用 grid 时，您应该养成始终指定 sticky 选项的习惯，并始终为每个包含框架中的一行和一列赋予非零权重.
解决方案示例
这是我编写您的代码的方式.它更长，但更容易理解.
from Tkinter import *根 = Tk()root.title('模型定义')root.geometry('{}x{}'.format(460, 350))# 创建所有主容器top_frame = Frame(root, bg='青色', width=450, height=50, pady=3)center = Frame(root, bg='gray2', width=50, height=40, padx=3, pady=3)btm_frame = Frame(root, bg='white', width=450, height=45, pady=3)btm_frame2 = Frame(root, bg='lavender', width=450, height=60, pady=3)# 布局所有的主要容器root.grid_rowconfigure(1, weight=1)root.grid_columnconfigure(0, weight=1)top_frame.grid(row=0,sticky="ew")center.grid(row=1,sticky="nse")btm_frame.grid(row=3,sticky="ew")btm_frame2.grid(row=4,sticky="ew")# 创建顶部框架的小部件model_label = Label(top_frame, text='模型尺寸')width_label = Label(top_frame, text='Width:')length_label = Label(top_frame, text='Length:')entry_W = Entry(top_frame, background="pink")entry_L = Entry(top_frame, background="orange")# 在顶部框架中布置小部件model_label.grid(row=0, columnspan=3)width_label.grid(row=1, column=0)length_label.grid(row=1, column=2)entry_W.grid(row=1, column=1)entry_L.grid(row=1, column=3)# 创建中心小部件center.grid_rowconfigure(0, weight=1)center.grid_columnconfigure(1, weight=1)ctr_left = Frame(center, bg='blue', width=100, height=190)ctr_mid = Frame(center, bg='yellow', width=250, height=190, padx=3, pady=3)ctr_right = Frame(center, bg='green', width=100, height=190, padx=3, pady=3)ctr_left.grid(row=0, column=0,sticky="ns")ctr_mid.grid(row=0, column=1,sticky="nse")ctr_right.grid(row=0, column=2,sticky="ns")root.mainloop()结果:
My gui layout
looks almost nothing like what I expect
so I assume there are some basics that I don't understand.
I assumed that frames contain their own 'grid space' (row, column) but the behavior I see doesn't bear that out, and I'm at a loss for getting things working the way I want for the top frame. My labels are supposed to be on the same row L to R, under a 'frame label' that spans the entire frame - except they don't. I want the actual to look more like the goal jpg, and I want to use grid to do it.
You can just see one of the entry fields to the right of the green frame. Why is it going there ?
from Tkinter import *
root = Tk()
root.title('Model Definition')
root.resizable(width=FALSE, height=FALSE)
root.geometry('{}x{}'.format(460, 350))
top_frame = Frame(root, bg='cyan', width = 450, height=50, pady=3).grid(row=0, columnspan=3)
Label(top_frame, text = 'Model Dimensions').grid(row = 0, columnspan = 3)
Label(top_frame, text = 'Width:').grid(row = 1, column = 0)
Label(top_frame, text = 'Length:').grid(row = 1, column = 2)
entry_W = Entry(top_frame).grid(row = 1, column = 1)
entry_L = Entry(top_frame).grid(row = 1, column = 3)
#Label(top_frame, text = '').grid(row = 2, column = 2)
center = Frame(root, bg='gray2', width=50, height=40, padx=3, pady=3).grid(row=1, columnspan=3)
ctr_left = Frame(center, bg='blue', width=100, height=190).grid(column = 0, row = 1, rowspan = 2)
ctr_mid = Frame(center, bg='yellow', width=250, height=190, padx=3, pady=3).grid(column = 1, row=1, rowspan=2)
ctr_right = Frame(center, bg='green', width=100, height=190, padx=3, pady=3).grid(column = 2, row=1, rowspan=2)
btm_frame = Frame(root, bg='white', width = 450, height = 45, pady=3).grid(row = 3, columnspan = 3)
btm_frame2 = Frame(root, bg='lavender', width = 450, height = 60, pady=3).grid(row = 4, columnspan = 3)
root.mainloop()
So specifically, where did my labels and Entry widgets go, and how do I get them to look more like the goal (top frame, the rest are for later).
I assumed that frames contain their own 'grid space'
That is a correct assumption.
You can just see one of the entry fields to the right of the green frame. Why is it going there ?
The problem starts here:
top_frame = Frame(root, ...).grid(row=0, ...)
In python, x = y().z() will always set x to the result of .z(). In the case of top_frame = Frame(...).grid(...), grid(...) always returns None so top_frame will be None. That causes every widget that you think is going into the top frame to actually go in the root window.
Solution Overview
As a general rule of thumb, you should never call grid, pack or place as part of the same statement that creates the widget. Partially it is for this exact behavior that you're experiencing, but also because I think it makes your code harder to write and harder to maintain over time.
Widget creation and widget layout are two different things. In my experience, layout problems are considerably easier to debug when you group your layout commands together.
Also, you should be consistent when using grid and always put the options in the same order so you can more easily visualize the layout. And finally, when using grid you should get in the habit of always specifying the sticky option, and always give one row and one column in each containing frame a non-zero weight.
Solution Example
Here's how I would write your code. It's much longer, but much easier to understand.
from Tkinter import *
root = Tk()
root.title('Model Definition')
root.geometry('{}x{}'.format(460, 350))
# create all of the main containers
top_frame = Frame(root, bg='cyan', width=450, height=50, pady=3)
center = Frame(root, bg='gray2', width=50, height=40, padx=3, pady=3)
btm_frame = Frame(root, bg='white', width=450, height=45, pady=3)
btm_frame2 = Frame(root, bg='lavender', width=450, height=60, pady=3)
# layout all of the main containers
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(0, weight=1)
top_frame.grid(row=0, sticky="ew")
center.grid(row=1, sticky="nsew")
btm_frame.grid(row=3, sticky="ew")
btm_frame2.grid(row=4, sticky="ew")
# create the widgets for the top frame
model_label = Label(top_frame, text='Model Dimensions')
width_label = Label(top_frame, text='Width:')
length_label = Label(top_frame, text='Length:')
entry_W = Entry(top_frame, background="pink")
entry_L = Entry(top_frame, background="orange")
# layout the widgets in the top frame
model_label.grid(row=0, columnspan=3)
width_label.grid(row=1, column=0)
length_label.grid(row=1, column=2)
entry_W.grid(row=1, column=1)
entry_L.grid(row=1, column=3)
# create the center widgets
center.grid_rowconfigure(0, weight=1)
center.grid_columnconfigure(1, weight=1)
ctr_left = Frame(center, bg='blue', width=100, height=190)
ctr_mid = Frame(center, bg='yellow', width=250, height=190, padx=3, pady=3)
ctr_right = Frame(center, bg='green', width=100, height=190, padx=3, pady=3)
ctr_left.grid(row=0, column=0, sticky="ns")
ctr_mid.grid(row=0, column=1, sticky="nsew")
ctr_right.grid(row=0, column=2, sticky="ns")
root.mainloop()
Result:
这篇关于使用框架和网格的 tkinter gui 布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
