如何在Tkinter中堆叠多个帧

Question

For my project, I need to create a GUI using Tkinter. I wanted to divide it into 4 different frames, each with different background colors. However, when I do this, only the first frame's background color is shown. I attached my code below as well as a screenshot of the output I'm getting.

from Tkinter import *
import tkMessageBox

root = Tk()
root.geometry("950x800")
root.configure(background="black")

def test():
   print("this is a test")

# *****Frames*****

fileFrame = Frame(root)
fileFrame.configure(background="yellow")
fileFrame.pack()
attributeFrame = Frame(root)
attributeFrame.configure(background="red")
attributeFrame.pack()
constraintFrame = Frame(root)
constraintFrame.configure(background="purple")
constraintFrame.pack()
preferenceFrame = Frame(root)
preferenceFrame.configure(background="blue")
preferenceFrame.pack()

# *****File Frame*****

label_1 = Label(fileFrame, text="Enter Attributes file name:", anchor="e",                 
bg="red", font="Times 25", width=25, height=1)
label_2 = Label(fileFrame, text="Enter hard constraints file name:",     
anchor="e", bg="blue", fg="yellow", font="Times 25", width=25, height=1)
label_3 = Label(fileFrame, text="Enter preferences file name:", 
anchor="e", bg="purple", fg="green", font="times 25", width=25, height=1)
entry_1 = Entry(fileFrame, font="Times 25")
entry_2 = Entry(fileFrame, font="Times 25")
entry_3 = Entry(fileFrame, font="Times 25")
button_1 = Button(fileFrame, text="Submit", bg="red", font="Times 20")
button_2 = Button(fileFrame, text="Submit", bg="blue", fg="yellow", 
font="Times 20")
button_3 = Button(fileFrame, text="Submit", bg="purple", fg="green", 
font="Times 20")
label_1.grid(row=0, padx=5, pady=5)
entry_1.grid(row=0, column=1)
button_1.grid(row=0, column=2, padx=5, pady=5)
label_2.grid(row=1, padx=5, pady=5)
entry_2.grid(row=1, column=1)
button_2.grid(row=1, column=2, padx=5, pady=5)
label_3.grid(row=2, padx=5, pady=5)
entry_3.grid(row=2, column=1)
button_3.grid(row=2, column=2, padx=5, pady=5)

# *****Attribute Frame*****

label_Attribute_header = Label(attributeFrame, text="Attributes:", 
bg="red", font="Times 25", width=25, height=1)
label_Attribute_header.pack()

# *****Constraint Frame*****

label_Constraint_header = Label(constraintFrame, text="Hard Constraints:", 
bg="purple", fg="green", font="Times 25", width=25, height=1)
label_Constraint_header.pack()

# *****Preference Frame*****

label_Preference_header = Label(preferenceFrame, text="Preferences:", 
bg="blue", fg="yellow", font="Times 25", width=25, height=1)
label_Preference_header.pack()

root.mainloop()

I expect there to be 4 different frames, all stacked on top of each other with different background colors, but instead only the first frame has a background color. Can somebody explain to me why this is and how I should go about fixing this? Thanks

Answer 1

Your frames are there. The bottom three frames have fewer things in them and you haven't given them any padding. The frame shrinks to fit, so when you just have one item, you won't see the frames.

You can easily see the frames if you do one of two things:

First, you can request that the frames fill their parent window in the x direction. When you do this, you'll see them:

fileFrame.pack(fill="x")
attributeFrame.pack(fill="x")
constraintFrame.pack(fill="x")
preferenceFrame.pack(fill="x")

Second, instead of or in addition to that, you can give padding around the labels in the bottom frames. That will let the frame colors appear.

label_Attribute_header.pack(padx=20, pady=20)
...
label_Constraint_header.pack(padx=20, pady=20)
...
label_Preference_header.pack(padx=20, pady=20)