TKinter Geometry Manager显示多行小部件

2024-04-19 01:15:59 发布

您现在位置:Python中文网/ 问答频道 /正文

我想显示一个缺词的句子列表。基本的、单一的思路是: One line example

上面的结构是“标签+条目+标签+间距+标签”。为了确保小部件左对齐,我使用了以下代码:

phraseLabel1 = tk.Label(questionFrame)
phraseLabel1.pack(side=tk.LEFT)

keyWordEntry = tk.Entry(questionFrame)
keyWordEntry.pack(side=tk.LEFT)

phraseLabel2 = tk.Label(questionFrame)
phraseLabel2.pack(side=tk.LEFT)

keyWordLabel = tk.Label(questionFrame)
keyWordLabel.pack(side=tk.LEFT,padx=30) 

我的目标是给用户提供一个多句子的输入屏幕。如下图所示:

Example multiple lines

虽然我设法通过下面(实验)代码创建标签,但我缺乏对几何体管理的理解。在

^{pr2}$

如上图所示,如何逐行管理小部件的放置?任何帮助都将不胜感激。在


Tags: 代码部件标签leftsidelabelpacktk
2条回答

下面这些就够了吗?在

for i in range(4): #4 is entered as a dummy value
    frames.append(tk.Frame(questionFrame))
    frames[i].grid(row=i, column=0, stick='W')

for i in range(4):
    lab1.append(tk.Label(frames[i]))
    lab1[i].grid(row=0, column=0)


    keyWordEntry.append(tk.Entry(frames[i]))
    keyWordEntry[i].grid(row=0, column=1)

    lab2.append(tk.Label(frames[i]))
    lab2[i].grid(row=0, column=2)

    keyWord.append(tk.Label(frames[i]))
    keyWord[i].grid(row=0, column=3)

    lab1[i].config(text=zinPhrase1[i])
    keyWordEntry[i].config(width=8)
    lab2[i].config(text=zinPhrase2[i])
    keyWord[i].config(text=keyWordNL[i],fg="red")

enter image description here

由于您似乎不想在网格中组织小部件,因此解决此问题的最常见解决方案是为每一行创建一个框架。框架从上到下堆叠,框架内的小部件从左到右堆叠。在

根据我的经验,当您将小部件创建与小部件布局分开时,GUI代码更容易可视化,所以我在下面的示例中这样做,希望能使它更容易理解。在

for i in range(4): #4 is entered as a dummy value
    rowFrame = tk.Frame(questionFrame)
    rowFrame.pack(side="top", fill="x")

    lab1.append(tk.Label(rowFrame))    
    keyWordEntry.append(tk.Entry(rowFrame))
    lab2.append(tk.Label(rowFrame))    
    keyWord.append(tk.Label(rowFrame))

    lab1[i].pack(side="left")
    keyWordEntry[i].pack(side="left")
    lab2[i].pack(side="left", padx=(0, 40))
    keyWord[i].pack(side="left")

    lab1[i].config(text=zinPhrase1[i])
    keyWordEntry[i].config(width=8)
    lab2[i].config(text=zinPhrase2[i])
    keyWord[i].config(text=keyWordNL[i],fg="red")

以上代码的结果如下:

enter image description here

相关问题 更多 >