有人可以帮我在 Tkinter 中创建这个 UI 吗?

Question

我需要做的UI

这是我需要的 UI。我已经制作了 UI 的左侧。但是，我无法在右侧添加框架。我认为我对所有元素的固有定位都是错误的，因此我无法获得框架的右侧位置。在留言板下，我需要一个框架，我可以在其中插入全部文本。有人可以帮我写代码吗？ 我当前的代码是：

from tkinter import *
from tkinter import ttk
import requests
class mainUI:
def __init__(self, root, username, data):
self.root = root
self.root.geometry("900x700")
self.root.title("Auto Login for " + username)
print(data)
# creating categories listbox
Label(self.root, text='Categories', font=('Times 13'), fg="red", padx=20, pady=20).grid(row=0, column=0, sticky=W)
self.categoriesListBox = Listbox(self.root, width=25)
self.categoriesListBox.grid(row=1, column=0, padx=10)
#adding the categories
self.categoriesList = data['Categories']
for item in self.categoriesList:
self.categoriesListBox.insert(END, item['Name'])
# binding double click event on categories
self.categoriesListBox.bind('<Double-1>', self.categorySelect)

# creating websites listbox
Label(self.root, text='Websites', font=('Times 13'), fg="red", padx=20, pady=20).grid(row=19, column=0, sticky=W)
self.wesbitesListBox = Listbox(self.root, width=25)
self.wesbitesListBox.grid(row=20, column=0, padx=10)
#creating the messages frame
Label(self.root, text="Message Board", fg = "red",font=('Times 13'), padx=20, pady=0).grid(row=0, column=1)
self.messageBoardFrame = Frame(self.root, width=200, height=200, background="white", pady=30).grid(row=1, column=1)
# self.messageBoardFrame = LabelFrame(text="Message Board")
Label(self.messageBoardFrame, text="Text").grid(row=1, column=1)

def categorySelect(self, event):
self.wesbitesListBox.delete(0,END)
item = self.categoriesListBox.get('active')
for name in self.categoriesList:
if name['Name'] == item:
websites = name['Websites']
break
print(websites)
for website in websites:
self.wesbitesListBox.insert(END, website)

if __name__ == '__main__':
root = Tk()
root.geometry('585x515+500+200')
application = mainUI(root, "Name", {
'Categories': [{'Name': '31West', 'Websites': ['a','a','a','a']}, {'Name': 'Book Domicile', 'Websites': ['b','b','b','b']},
{'Name': 'Crate', 'Websites': []}, {'Name': 'Electrosonic Inc', 'Websites': []},
{'Name': 'HostGenius', 'Websites': []}, {'Name': 'Insane Audio', 'Websites': []},
{'Name': 'Itsy Bitsy', 'Websites': []}, {'Name': 'Jobs', 'Websites': []},
{'Name': 'Kobe Steakhouse', 'Websites': []}, {'Name': 'MIS Computer Corp.', 'Websites': []},
{'Name': 'Natrinsic', 'Websites': []}, {'Name': 'Ramshyam', 'Websites': []},
{'Name': 'TEST CO', 'Websites': []}, {'Name': 'W-Appliance', 'Websites': []}],
'isLoggedIn': True}
)
root.mainloop()

enter code here

Answer 1

class mainUI:
def __init__(self, root, username, data):
self.root = root
self.root.geometry("900x700")
self.root.title("Auto Login for " + username)
print(data)
master_frame = Frame(self.root)
master_frame.grid(row=0, column=0)
left_frame = Frame(master_frame)
left_frame.grid(row=0, column=0, sticky='nswe')
# creating categories listbox
categories_label = Label(left_frame, text='Categories', font=('Times 13'), fg="red")
categories_label.grid(row=0, column=0)
categories_frame = Frame(left_frame)
categories_frame.grid(row=1, column=0)
self.categoriesListBox = Listbox(categories_frame, width=25)
self.categoriesListBox.grid(row=1, column=0)
# adding the categories
self.categoriesList = data['Categories']
for item in self.categoriesList:
self.categoriesListBox.insert(END, item['Name'])
# binding double click event on categories
self.categoriesListBox.bind('<Double-1>', self.categorySelect)
# creating websites listbox
websites_label = Label(left_frame, text='Websites', font=('Times 13'), fg="red")
websites_label.grid(row=2, column=0)
self.wesbitesListBox = Listbox(left_frame, width=25)
self.wesbitesListBox.grid(row=3, column=0)
right_frame = Frame(master_frame)
right_frame.grid(row=0, column=1, sticky='nswe')
# creating the messages frame
message_label = Label(right_frame, text="Message Board", fg="red", font='Times 13')
message_label.grid(row=0, column=0)
self.messageBoardFrame = Frame(right_frame, width=400, height=400, background="white")
self.messageBoardFrame.grid(row=1, column=0)
self.messageBoardFrame.grid_propagate(False)  # should delete later, it's only to show frame size, with this flag true frame will fit widgets inside it
# self.messageBoardFrame = LabelFrame(text="Message Board")
text_label = Label(self.messageBoardFrame, text="Text")
text_label.grid(row=0, column=0)

网格不仅适用于窗口，也适用于框架内部。所以在窗口内你可以放一些类似的东西master_frame与grid(row=0, column=0).然后制作 2 帧，左右用网格(row=0, column=0)和(row=0, column=1)。它不会重叠，因为master_frame在根内，在master_frame内向左和向右。然后只是重复了这个想法。

多亏了这一点，您可以在其中一个框架中放置尽可能多的小部件，无论左/右/下方/在现有帧上的位置，它不会影响其他框架中的小部件，因为它们将根据父级放置。