使用tkinter未按要求显示布局

Question

我在python中使用tkinter，需要使用这样的标签和按钮构建一个简单的GUI：

但我面临两个问题。首先是我在顶部而不是在计时器下方获取按钮。第二件事是我有一个按钮列表，所以不是明确写出所有四个按钮位置，可以有更好的方法。

目前我的输出是：

我的代码是：

from Tkinter import *
import json
import tkMessageBox


class ProgramGUI(Frame):

    def __init__(self, master=None):
        master.title('QuizBox')
        master.update()
        master.minsize(350, 150)
        Frame.__init__(self, master)
        self.pack()
        questionText = StringVar()
        Label(master, textvariable=questionText,
              justify=CENTER, wraplength=200).pack()
        questionText.set("Question text goes here")

        timer = IntVar()
        Label(master, textvariable=timer, justify=CENTER, fg="blue").pack()
        timer.set("10")

        buttonList = []
        buttonList.append("Answer 1")
        buttonList.append("Answer 2")
        buttonList.append("Answer 3")
        buttonList.append("Answer 4")
        # ADD FOUR BUTTONS HORIZONTALLY

        self.columnconfigure(0, pad=3)
        self.columnconfigure(1, pad=3)
        self.columnconfigure(2, pad=3)
        self.columnconfigure(3, pad=3)
        self.rowconfigure(0, pad=3)
        answer1 = Button(self, text="Answer 1")
        answer1.grid(row=0, column=0)
        answer2 = Button(self, text="Answer 2")
        answer2.grid(row=0, column=1)
        answer3 = Button(self, text="Answer 3")
        answer3.grid(row=0, column=2)
        answer4 = Button(self, text="Answer 4")
        answer4.grid(row=0, column=3)

        score = IntVar()
        Label(master, textvariable=score, justify=CENTER).pack()
        score.set("Score: 0")


root = Tk()
gui = ProgramGUI(master=root)
gui.mainloop()
root.destroy()

Answer 1

快速解决方法是移动self.pack()，以便在您按下网格后，但在打包最终标签之前发生。

    answer4.grid(row=0, column=3) 

    self.pack()

    score = IntVar()

现在，您的按钮将显示在计时器下方和分数上方。

顺便说一句，您可以使用for循环来创建具有较少代码行的按钮。

    timer.set("10")

    #ADD FOUR BUTTONS HORIZONTALLY
    buttonList = ["Answer 1", "Answer 2", "Answer 3", "Answer 4"]
    self.rowconfigure(0, pad=3)
    for i, value in enumerate(buttonList):
        self.columnconfigure(i, pad=3)
        Button(self, text=value).grid(row=0, column=i)

    self.pack()

Answer 2

如果您组织代码以反映UI的结构，则解决方案变得更容易可视化。

当我查看您的设计时，我会看到四个明确定义的行 - 问题，计时器，按钮行和分数。如果是我，我会为每一行创建一个单独的框架，并将行一个堆叠在一起。

我的假设是问题是可能会改变大小的一行，因为有些问题可能很短，有些可能很长。

例如：

questionFrame = Frame(self, ...)
timerFrame = Frame(self, ...)
buttonFrame = Frame(self, ...)
scoreFrame = Frame(self, ...)

questionFrame.pack(side="top", fill="both", expand=True)
timerFrame.pack(side="top", fill="x")
buttonFrame.pack(side="top", fill="x")
scoreFrame.pack(side="top", fill="x")

通过组织这样的代码，并将给定容器的所有pack语句分组在一起，可视化UI变得更加容易。一旦你正确地管理了这四个区域，你就可以在每个框架内做任何你想做的事情，而不会影响其他框架中发生的事情。

您可以更进一步，创建一个类或函数来定义每个部分，这样您就不会同时定义一大堆小部件。例如：

class QuestionFrame(tk.Frame):
    <all the code to implement the question frame>
class ButtonFrame(tk.Frame):
    <all the code to implement the row of buttons>
...
questionFrame = QuestionFrame(...)
buttonFrame = ButtonFrame(...)
...

UI的每个主要区域有一个函数或一个类，使代码更易于管理。