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

Question

UI I need to make

这是我需要的 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) 放在一起。然后用网格(row=0, column=0) 和(row=0, column=1) 制作左右两帧。它不会重叠，因为 master_frame 在根内，左右在 master_frame 内。然后就是重复了这个想法。

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