Python 2.7 Tkinter 网格布局管理器没有像想象的那样工作

Question

尊敬的 StackOverflow 社区，

我正在尝试使用 Python 进行编程，但我在使用网格布局管理器时遇到了困难。我一直在尝试自己寻找答案并尝试了各种选项，但我就是无法让我的 UI 看起来像我想要的那样。

我希望你能帮助我。不幸的是，我不能发布图片，因为我是新来的。但基本上我希望左侧的所有彩色按钮在第 1 列中彼此间隔均匀。然后是第 2 列中的标签和第 3 列中的文本区域。

我还想在底部创建一个带有关闭按钮的边框，但这根本不显示。

请你给我一些关于我做错了什么的提示吗？

import Tkinter
from Tkinter import *
from ttk import Frame, Button, Style


class KarateSyllabus(Frame):
    """A program that displays karate grading syllabi"""


  #define the constructor
    def __init__(self, parent):
        Frame.__init__(self, parent)   

        self.parent = parent

        self.initUI()


    #define the GUI
    def initUI(self):

        #define the basic parameters of the window
        self.parent.title("Karate Syllabus")
        self.style = Style()
        self.style.theme_use("default")
        #self.parent.geometry("500x500")
        self.parent.config(background = "black")
        self.parent.wm_iconbitmap("favicon.ico")
        self.grid()


        #create the buttons for the syllabus
        button1 = Tkinter.Button(self, text = "White Belt", bg = "white",         height=1, width =10).grid(row=0, column=0, pady=4, padx=10, sticky=N)
        button2 = Tkinter.Button(self, text = "Red Belt",   bg="red", height=1, width =10).grid(row=1,column=0, pady=4, padx=10,  sticky=N )
        button3 = Tkinter.Button(self, text = "Orange Belt",bg="orange", height=1, width =10).grid(row=2,column=0, pady=4, padx=10,  sticky=N)
        button4 = Tkinter.Button(self, text = "Yellow Belt",bg="yellow", height=1, width =10).grid(row=3, column=0, pady=4, padx=10,  sticky=N)
        button5 = Tkinter.Button(self, text = "Green Belt", bg="green", height=1, width =10).grid(row=4, column=0, pady=4, padx=10,  sticky=N)
        button6 = Tkinter.Button(self, text = "Purple Belt",bg="purple", height=1, width =10).grid(row=5, column=0, pady=4, padx=10,  sticky=N)
        button7 = Tkinter.Button(self, text = "Brown Belt", bg="brown", height=1, width =10).grid(row=6, column=0, pady=4, padx=10,  sticky=N)
        button8 = Tkinter.Button(self, text = "Black Belt", bg="black", foreground="white", height=1, width =10).grid(row=7, column=0, pady=2, padx=10,  sticky=N)


        #create the three text areas to display the text and according labels
        BasicsLabel = Label(self, text="Basics:").grid(row =0, column =2)
        BasicTextArea = Text(self, width=50, height=6, takefocus=0)
        BasicTextArea.grid(row=0, column=3, padx=10, pady=2)
        BasicTextArea.config(font =("Arial",10), bg="grey", wrap = WORD)

        KataLabel = Label(self, text="Kata:").grid(row =2, column =2)
        KataTextArea = Text(self, width=50, height=6, takefocus=0)
        KataTextArea.grid(row=2, column=3, padx=30, pady=2)
        KataTextArea.config(font =("Arial",10), bg="grey")

        KumiteLabel = Label(self, text="Kumite:").grid(row =3, column =2)
        KumiteTextArea = Text(self, width=50, height=6, takefocus=0)
        KumiteTextArea.grid(row=3, column=3, padx=10, pady=2)
        KumiteTextArea.config(font =("Arial",10), bg="grey")

        #create the second frame for the bottom with the close button
        frame = Frame(self, relief=RAISED, borderwidth=1)
        frame.grid(row=8, column= 1)

        closeButton = Button(self, text="Exit")
        closeButton.grid(row = 8, column = 3)



def main():

    root = Tk()
    app = KarateSyllabus(root)
    root.mainloop()


if __name__ == '__main__':
    main()  

Answer 1

听起来您不需要使用网格，因为您没有创建网格。听起来您希望每列垂直均匀分布，这样就排除了类似网格的布局。

您正在创建三列，所以我会先在底部为您的退出按钮打包一个框架，然后在主窗口中从左到右打包三个垂直框架。

接下来，将颜色按钮打包在最左边的框架中，从上到下。使用正确的选项，它们将均匀分布（尽管您也可以根据需要使用网格）。

最后，对其他两列使用完全相同的技术 - 从上到下打包所有内容，让每一列展开以填充分配给它们的区域。

Answer 2

您应该至少使用一个 Frame 来组合所有左侧按钮，并使用另一个 Frame 来组合 Exit 按钮，如以下代码所示：

import Tkinter
from ttk import Frame, Button, Style

class KarateSyllabus(Frame):
    """A program that displays karate grading syllabi"""

  #define the constructor
    def __init__(self, parent):
        Frame.__init__(self, parent)   
        self.parent = parent
        self.initUI()

    #define the GUI
    def initUI(self):
        #define the basic parameters of the window
        self.parent.title("Karate Syllabus")
        self.style = Style()
        self.style.theme_use("default")
        #self.parent.geometry("500x500")
        self.parent.config(background = "black")
        self.parent.wm_iconbitmap("favicon.ico")
        self.grid(sticky=Tkinter.NSEW)

        button_panel = Frame(self)

        #create the buttons for the syllabus
        button1 = Tkinter.Button(button_panel, text="White Belt",  bg="white",  height=1, width =10).grid(row=0, column=0, pady=4, padx=10, sticky=Tkinter.N)
        button2 = Tkinter.Button(button_panel, text="Red Belt",    bg="red",    height=1, width =10).grid(row=1, column=0, pady=4, padx=10, sticky=Tkinter.N)
        button3 = Tkinter.Button(button_panel, text="Orange Belt", bg="orange", height=1, width =10).grid(row=2, column=0, pady=4, padx=10, sticky=Tkinter.N)
        button4 = Tkinter.Button(button_panel, text="Yellow Belt", bg="yellow", height=1, width =10).grid(row=3, column=0, pady=4, padx=10, sticky=Tkinter.N)
        button5 = Tkinter.Button(button_panel, text="Green Belt",  bg="green",  height=1, width =10).grid(row=4, column=0, pady=4, padx=10, sticky=Tkinter.N)
        button6 = Tkinter.Button(button_panel, text="Purple Belt", bg="purple", height=1, width =10).grid(row=5, column=0, pady=4, padx=10, sticky=Tkinter.N)
        button7 = Tkinter.Button(button_panel, text="Brown Belt",  bg="brown",  height=1, width =10).grid(row=6, column=0, pady=4, padx=10, sticky=Tkinter.N)
        button8 = Tkinter.Button(button_panel, text="Black Belt",  bg="black",  height=1, width =10, foreground="white").grid(row=7, column=0, pady=2, padx=10, sticky=Tkinter.N)

        button_panel.grid(row=0, column=0, rowspan=3, sticky=Tkinter.N)

        #create the three text areas to display the text and according labels
        BasicsLabel = Tkinter.Label(self, text="Basics:").grid(row=0, column=1, sticky=Tkinter.N)
        BasicTextArea = Tkinter.Text(self, width=50, height=6, takefocus=0)
        BasicTextArea.grid(row=0, column=2, padx=10, pady=2, sticky=Tkinter.NSEW)
        BasicTextArea.config(font=("Arial",10), bg="grey", wrap=Tkinter.WORD)

        KataLabel = Tkinter.Label(self, text="Kata:").grid(row=1, column=1, sticky=Tkinter.N)
        KataTextArea = Tkinter.Text(self, width=50, height=6, takefocus=0)
        KataTextArea.grid(row=1, column=2, padx=10, pady=2, sticky=Tkinter.NSEW)
        KataTextArea.config(font =("Arial",10), bg="grey")

        KumiteLabel = Tkinter.Label(self, text="Kumite:").grid(row=2, column=1, sticky=Tkinter.N)
        KumiteTextArea = Tkinter.Text(self, width=50, height=6, takefocus=0)
        KumiteTextArea.grid(row=2, column=2, padx=10, pady=2, sticky=Tkinter.NSEW)
        KumiteTextArea.config(font=("Arial",10), bg="grey")

        #create the second frame for the bottom with the close button
        close_frame = Tkinter.Frame(self, relief=Tkinter.RAISED, borderwidth=2)
        close_frame.grid(row=3, column=0, columnspan=3, sticky=Tkinter.EW)
        close_frame.columnconfigure(0, weight=1)

        closeButton = Tkinter.Button(close_frame, text="Exit", command=self.quit)
        # Move 'Exit' to the right. Comment out next line to leave it centered.
        closeButton.grid(sticky=Tkinter.E)

        self.rowconfigure(0, weight=1)
        self.rowconfigure(1, weight=1)
        self.rowconfigure(2, weight=1)
        # Leave row 3 (close_frame) non-expandable.

        # Leave columns 1 and 2 (button_panel and labels) non-expandable.
        self.columnconfigure(2, weight=1)

        self.parent.rowconfigure(0, weight=1)
        self.parent.columnconfigure(0, weight=1)


def main():
    root = Tkinter.Tk()
    app = KarateSyllabus(root)
    root.mainloop()


if __name__ == '__main__':
    main()