tkinter：框架和网格

Question

I, for the life of me, cannot understand how to use grid() to manage widgets inside a Frame ( Python 3.6 ). The code below tries to show a 2-by-2 matrix of ListBox es in the root window.

    import tkinter as TK

    root = TK.Tk()
    root.title('My App')
    rootWidth = 768
    rootHeight = 768
    root.geometry('{}x{}+0+0'.format(rootWidth, rootHeight))
    root.resizable(width=False, height=False)

    frame00 = TK.Frame(root, bd=2, relief=TK.SUNKEN)
    box00 = TK.Listbox(frame00, bd=0)
    box10 = TK.Listbox(frame00, bd=0)

    box00.grid(row=0, sticky=TK.N)
    box10.grid(row=1, sticky=TK.S)
    frame00.grid(row=0, column=0, sticky=TK.W)
    frame00.rowconfigure(0, weight=1)
    frame00.rowconfigure(1, weight=1)


    frame01 = TK.Frame(root, bd=2, relief=TK.SUNKEN)
    box01 = TK.Listbox(frame01, bd=0)
    box11 = TK.Listbox(frame01, bd=0)

    box01.grid(row=0, sticky=TK.N)
    box11.grid(row=1, sticky=TK.S)
    frame01.grid(row=0, column=1, sticky=TK.E)
    frame01.rowconfigure(0, weight=1)
    frame01.rowconfigure(1, weight=2)

    root.grid_rowconfigure(0, weight=1)
    root.grid_columnconfigure(0, weight=1)
    root.grid_columnconfigure(1, weight=1)

    for i in range(20):
        box00.insert(TK.END, 'test')
        box10.insert(TK.END, 'test')
        box01.insert(TK.END, 'test')
        box11.insert(TK.END, 'test')

In the end, I only see two ListBoxes (ie, only one row) instead of 4 of them in my GUI. But, If I use one Frame per ListBox , then everything works.

    import tkinter as TK

    root = TK.Tk()
    root.title('My App')
    rootWidth = 768
    rootHeight = 768
    root.geometry('{}x{}+0+0'.format(rootWidth, rootHeight))
    root.resizable(width=False, height=False)

    frame00 = TK.Frame(root, bd=2, relief=TK.SUNKEN)
    box00 = TK.Listbox(frame00, bd=0)
    frame10 = TK.Frame(root, bd=2, relief=TK.RAISED)
    box10 = TK.Listbox(frame10, bd=0)

    box00.grid(row=0, sticky=TK.N)
    box10.grid(row=0, sticky=TK.S)
    frame00.grid(row=0, column=0, sticky=TK.W)
    frame10.grid(row=1, column=0, sticky=TK.W)


    frame01 = TK.Frame(root, bd=2, relief=TK.SUNKEN)
    box01 = TK.Listbox(frame01, bd=0)
    frame11 = TK.Frame(root, bd=2, relief=TK.RAISED)
    box11 = TK.Listbox(frame11, bd=0)

    box01.grid(row=0, sticky=TK.N)
    box11.grid(row=0, sticky=TK.S)
    frame01.grid(row=0, column=1, sticky=TK.E)
    frame11.grid(row=1, column=1, sticky=TK.E)

    root.grid_rowconfigure(0, weight=1)
    root.grid_columnconfigure(0, weight=1)
    root.grid_columnconfigure(1, weight=1)

    for i in range(20):
        box00.insert(TK.END, 'test')
        box10.insert(TK.END, 'test')
        box01.insert(TK.END, 'test')
        box11.insert(TK.END, 'test')

Is it that inside Frame, you can only use pack() ?

UPDATE

People in the thread pointed out that in the original code list I didn't use the column keyword argument in those grid() calls. In fact, I did, it is just that I remove them in my latest try before posting which basically resulted in the same.

Here is a new version that includes the column arguments, which shows only two ListBox es, too.

root = TK.Tk()
root.title('Script Launcher')
rootWidth = 768
rootHeight = 768
root.geometry('{}x{}+0+0'.format(rootWidth, rootHeight))
root.resizable(width=False, height=False)

frame00 = TK.Frame(root, bd=2, relief=TK.SUNKEN)
box00 = TK.Listbox(frame00, bd=0)
box10 = TK.Listbox(frame00, bd=0)

box00.grid(row=0, column=0, sticky=TK.N)
box10.grid(row=1, column=0, sticky=TK.S)
frame00.grid(row=0, column=0, sticky=TK.W)
frame00.rowconfigure(0, weight=1)
frame00.rowconfigure(1, weight=1)
frame00.columnconfigure(0, weight=1)


frame01 = TK.Frame(root, bd=2, relief=TK.SUNKEN)
box01 = TK.Listbox(frame01, bd=0)
box11 = TK.Listbox(frame01, bd=0)

box01.grid(row=0, column=1,  sticky=TK.N)
box11.grid(row=1, column=1, sticky=TK.S)
frame01.grid(row=0, column=1, sticky=TK.E)
frame01.rowconfigure(0, weight=1)
frame01.rowconfigure(1, weight=1)
frame01.columnconfigure(0, weight=1)

root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=1)

for name in range(20)
    box00.insert(TK.END, 'test')
    box10.insert(TK.END, 'test')
    box01.insert(TK.END, 'test')
    box11.insert(TK.END, 'test')


root.mainloop()

Answer 1

The grid() method tells the GridManager how to handle the widget that is calling grid(). So if you called Tk().grid(), that would be pointless yes. I prefer to have a class like MyApp as the base level "wrapper" for all internal widgets.

Rewrote on my system, this produces a GUI in the form of:

-----------------------------------
|                |                |
|                |                |
|    ListBox     |     ListBox    |
|                |                |
|                |                |
-----------------------------------
|                |                |
|                |                |
|    ListBox     |     ListBox    |
|                |                |
|                |                |
-----------------------------------

The outer level is the TK.Tk() , its first inner level is a TK.Frame() . Then that is broken into left and right, each a TK.Frame() . Looks like:

-----------------------------------
|                |                |
|                |                |
|                |                |
|                |                |
|                |                |
|     Frame      |      Frame     |
|                |                |
|                |                |
|                |                |
|                |                |
|                |                |
-----------------------------------

Then we grid each internal frame vertically by setting the weights of the rows.

import tkinter as TK

class MyApp(TK.Frame):

    def __init__(self, master):
        super().__init__(master) # initialize the 'TK.Frame'

        # configure the root Frame (i.e. 'self')
        self.master = master # just for reference later
        self.master.grid_rowconfigure(0, weight = 1)
        self.master.grid_columnconfigure(0, weight = 1)
        self.grid(column = 0, row = 0, sticky = 'nsew')
        self.grid_rowconfigure(0, weight = 1)
        self.grid_columnconfigure(0, weight = 1) # columns will split space
        self.grid_columnconfigure(1, weight = 1) # columns will split space

        # configure internal left Frame
        self.left_frame = TK.Frame(self, borderwidth = 2, relief = TK.SUNKEN)
        self.left_frame.grid_rowconfigure(0, weight = 1) # rows will split space
        self.left_frame.grid_rowconfigure(1, weight = 1) # rows will split space
        self.left_frame.grid_columnconfigure(0, weight = 1)
        self.left_frame.grid(column = 0, row = 0, sticky = 'nsew')
        self.left_box0 = TK.Listbox(self.left_frame, borderwidth = 0)
        self.left_box0.grid(column = 0, row = 0, sticky = 'nsew')
        self.left_box1 = TK.Listbox(self.left_frame, borderwidth = 0)
        self.left_box1.grid(column = 0, row = 1, sticky = 'nsew')

        # configure internal right Frame
        self.right_frame = TK.Frame(self, borderwidth = 2, relief = TK.SUNKEN)
        self.right_frame.grid_rowconfigure(0, weight = 1) # rows will split space
        self.right_frame.grid_rowconfigure(1, weight = 1) # rows will split space
        self.right_frame.grid_columnconfigure(0, weight = 1)
        self.right_frame.grid(column = 1, row = 0, sticky = 'nsew')
        self.right_box0 = TK.Listbox(self.right_frame, borderwidth = 0)
        self.right_box0.grid(column = 0, row = 0, sticky = 'nsew')
        self.right_box1 = TK.Listbox(self.right_frame, borderwidth = 0)
        self.right_box1.grid(column = 0, row = 1, sticky = 'nsew')

        for i in range(20):
            self.left_box0.insert(TK.END, 'test')
            self.left_box1.insert(TK.END, 'test')
            self.right_box0.insert(TK.END, 'test')
            self.right_box1.insert(TK.END, 'test')


if __name__ == '__main__': # get in the habit of doing this
    root = TK.Tk()
    root.title('My App')
    root.geometry('{}x{}'.format(768, 768))
    root.resizable(width = False, height = False)
    app = MyApp(root)
    app.mainloop()

Answer 2

You forget to add column to the grid see this example to do it.

box00.grid(row=0, column=45, sticky=TK.N)

grid works like excel sheet with rows and column

check this link to read more about it. it is well documented there.

FULL CODE

import tkinter as TK

root = TK.Tk()
root.title('My App')
rootWidth = 768
rootHeight = 768
root.geometry('{}x{}+0+0'.format(rootWidth, rootHeight))
root.resizable(width=False, height=False)

frame00 = TK.Frame(root, bd=2, relief=TK.SUNKEN)
box00 = TK.Listbox(frame00, bd=0)
box10 = TK.Listbox(frame00, bd=0)

box00.grid(row=0, column=75, sticky=TK.N)
box10.grid(row=1, column=5, sticky=TK.S)
frame00.grid(row=0, column=0, sticky=TK.W)
frame00.rowconfigure(0, weight=1)
frame00.rowconfigure(1, weight=1)

frame01 = TK.Frame(root, bd=2, relief=TK.SUNKEN)
box01 = TK.Listbox(frame01, bd=0)
box11 = TK.Listbox(frame01, bd=0)

box01.grid(row=0, column=7, sticky=TK.N)
box11.grid(row=1, column=60,  sticky=TK.S)
frame01.grid(row=0, column=1, sticky=TK.E)
frame01.rowconfigure(0, weight=1)
frame01.rowconfigure(1, weight=2)

root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=1)

for i in range(20):
    box00.insert(TK.END, 'test')
    box10.insert(TK.END, 'test')
    box01.insert(TK.END, 'test')
    box11.insert(TK.END, 'test')

root.mainloop()

Answer 3

You can use grid() inside Frame. Here is an example. Hope it helps...

    import tkinter as tk
    from tkinter import *
    from tkinter import ttk

    class GUI:

        def __init__(self, master):
            mainframe = ttk.Frame(master)
            mainframe.grid(column=0, row=0, sticky=(N, W, E, S))
            mainframe.columnconfigure(0, weight=1)
            mainframe.rowconfigure(0, weight=1)
            list1 = Listbox(master, bd=0)
            list1.grid(column=0, row=0)
            list2 = Listbox(master, bd=0)
            list2.grid(column=1, row=0)
            separator1 = Frame(list1, height=2, bd=1, relief=SUNKEN)
            separator1.grid(column=0, row=0)
            separator2 = Frame(list1, height=2, bd=1, relief=SUNKEN)
            separator2.grid(column=1, row=0)
            separator3 = Frame(list2, height=2, bd=1, relief=SUNKEN)
            separator3.grid(column=2, row=0)
            separator4 = Frame(list2, height=2, bd=1, relief=SUNKEN)
            separator4.grid(column=3, row=0)
            e1 = Label(separator1, text='Label1')
            e1.grid(sticky=W+E)
            e2= Label(separator2, text='Label2')
            e2.grid(sticky=W+E)
            e3 = Label(separator3, text='Label3')
            e3.grid(sticky=W+E)
            e4= Label(separator4, text='Label4')
            e4.grid(sticky=W+E)    

    root = Tk()
    my_gui = GUI(root)
    root.mainloop()

Here's a very nice explanation for tkinter http://effbot.org/tkinterbook/grid.htm