Python Tkinter 在笔记本中放置框架和树视图

如何解决Python Tkinter 在笔记本中放置框架和树视图

我正在研究一个非常简单的 TKinter 布局。它由一个带有两个标签的笔记本组成。在第一个选项卡中，我有 1 个 Frames，里面还有 3 个。这工作正常，可以在下面看到：

但是，当我尝试将 Treeview 添加到最左侧的红色框（令人困惑地称为 top_frame）时。它就在下面。

如下图：

我认为我的父子关系是正确的，所以不明白为什么它没有按预期坐着。

欢迎任何帮助。我的代码在下面，我需要将树视图放入红色框中的结果。我花了很长时间试图解决这个问题，一开始在笔记本中使用 grid() 但即使切换到 pack() 仍然没有运气

from tkinter import *
from tkinter import ttk

root = Tk()

tabControl = ttk.Notebook(root) 
  
tab1 = ttk.Frame(tabControl) 

tab2 = ttk.Frame(tabControl) 
  
tabControl.add(tab1,text ='Tab 1') 
tabControl.add(tab2,text ='Tab 2') 
tabControl.pack()




top_frame1 = Frame(tab1,bg='red',width = 450,height=400,relief=SUNKEN).pack(side=LEFT,fill = BOTH)
Mid_frame = Frame(tab1,bg='Orange',height=100,relief=SUNKEN).pack(side=RIGHT,fill = BOTH)
bottom_frame = Frame(tab1,bg='green',fill = BOTH)

treeview_menu = ttk.Treeview(top_frame1)
treeview_menu.pack()
treeview_menu.insert('','0','m1',text = 'department 1')
treeview_menu.insert('','1','m2',text = 'department 2')
treeview_menu.insert('','2','m3',text = 'department 3')
treeview_menu.insert('','3','m4',text = 'department 4')
treeview_menu.insert('','4','m5',text = 'department 5')

treeview_menu.insert('m1','end','cs1',text = 'Staff Mbr1')
treeview_menu.insert('m1','cs2',text = 'Staff Mbr2')

treeview_menu.insert('m2','bc1',text = 'Staff Mbr1')
treeview_menu.insert('m2','bc2',text = 'Staff Mbr2')

treeview_menu.insert('m3','av1',text = 'Staff Mbr1')
treeview_menu.insert('m3','av2',text = 'Staff Mbr2')

treeview_menu.insert('m4','mc1',text = 'Staff Mbr1')
treeview_menu.insert('m4','mc2',text = 'Staff Mbr2')

treeview_menu.insert('m5','ss1',text = 'Staff Mbr1')
treeview_menu.insert('m5','ss2',text = 'Staff Mbr2')