佈局使用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的每個主要區域的一個功能或一個類使代碼更容易管理。