Как сгруппировать два набора кнопок в каждом верхнем углу экрана, используя Tkinter?

Question

Я пытаюсь запрограммировать графический интерфейс, который будет отображать три кнопки в верхнем левом углу и четыре кнопки в верхнем правом углу окна.Я попытался сделать это, создав разные фреймы: «левый» фрейм, где я размещаю первый из группы кнопок и где позже добавлю еще несколько кнопок.Рамка "TopLeft corner", где я добавляю оставшиеся две кнопки первой группы.Рамка "Topright corner", в которую я помещаю первые три кнопки второй группы.И, наконец, «правильная» рамка, где я помещаю последнюю кнопку и где позже добавлю больше кнопок, как показано на рисунке.

Но проблема в том, что верхние и верхние фреймы конфликтуют и накладываются друг на друга, и, кроме того, верхняя фрейм накладывается на верхнюю часть правого фрейма, есть ли у кого-нибудь исправление для этого?

Это текущий графический интерфейс:

Это то, чего я хотел бы достичь:

from tkinter import *
import tkinter as tk
from tkinter import messagebox

win = tk.Tk()
width_value = win.winfo_screenwidth()
height_value = win.winfo_screenheight()
win.geometry(f"{width_value}x{height_value}+0+0")
win.resizable(False, True)
win.title("Test GUI")

leftFrame = tk.Frame(win)
leftFrame.pack(side=LEFT, anchor=N)

homeImg = PhotoImage(file="home_icon.png")
homeb = Button(leftFrame, image=homeImg, command=homeMenu, height=100, 
width=100).pack(padx=10, pady=10)

topLeftFrame = tk.Frame(win, width=200, height=100)
topLeftFrame.pack(side=TOP, anchor=W)

rgbmenuImg = PhotoImage(file="rgb_icon.png")
rgbmenub = Button(topLeftFrame, image=rgbmenuImg, command=rgbmenu, height=100, width=100)

thermalmenuImg = PhotoImage(file="thermal_icon.png")
cameraImg = PhotoImage(file="camera_icon.png")
thermalmenub = Button(topLeftFrame, image=thermalmenuImg, command=thermalmenu, height=100, width=100)

rgbmenub.grid(row=0, column=2, padx=10, pady=10)
thermalmenub.grid(row=0, column=3, padx=10, pady=10)

topRightFrame = tk.Frame(win, width=300, height=100)
topRightFrame.pack(side=TOP, anchor=E)

settImg = PhotoImage(file="settings_icon.png")
settingb = Button(topRightFrame, image=settImg, command=settings, height=100, width=100)

infoImg = PhotoImage(file="copyright_icon.png")
infob = Button(topRightFrame, image=infoImg, command=copyright, height=100, width=100)

loginImg = PhotoImage(file="login_icon.png")
loginb = Button(topRightFrame, image=loginImg, command=login, height=100, width=100)

settingb.grid(row=0, column=1, padx=10, pady=10)
infob.grid(row=0, column=2, padx=10, pady=10)
loginb.grid(row=0, column=3,padx=10, pady=10)

rightFrame = tk.Frame(win)
rightFrame.pack(side=RIGHT, anchor=N)

exitImg = PhotoImage(file="exit_icon.png")
exitb = Button(rightFrame, image=exitImg, command=quit, height=100, width=100).pack(padx=10, pady=10)

dema = Button(rightFrame, text="DEMA Intranet", command=dema_intranet).pack(padx=10, pady=10)

win.mainloop()

Answer 1

Будет гораздо лучше, если вы используете grid() менеджер геометрии, поскольку у вас гораздо более точный контроль над расположением виджетов.С pack() вы можете легко все испортить.Обратите внимание, что я нарисовал границы, чтобы вы поняли, что я немного изменил вещи.Вы можете ясно видеть кадры на картинке.

import tkinter as tk
from tkinter import messagebox

win = tk.Tk()
width_value = win.winfo_screenwidth()
height_value = win.winfo_screenheight()
win.geometry(f"{width_value}x{height_value}+0+0")
win.resizable(False, True)
win.title("Test GUI")

win.grid_columnconfigure(0, weight=1)
win.grid_columnconfigure(1, weight=1)

topLeftFrame = tk.Frame(win, relief='solid', bd=2)
topLeftFrame.grid(row=0, column=0, padx=10, sticky="w")

homeImg = tk.PhotoImage(file="ex1.png")
homeb = tk.Button(topLeftFrame, image=homeImg, height=100, width=100).grid(row=0, column=0, padx=10, pady=10)

rgbmenuImg = tk.PhotoImage(file="ex1.png")
rgbmenub = tk.Button(topLeftFrame, image=rgbmenuImg, height=100, width=100)

thermalmenuImg = tk.PhotoImage(file="ex1.png")
cameraImg = tk.PhotoImage(file="ex1.png")
thermalmenub = tk.Button(topLeftFrame, image=thermalmenuImg, height=100, width=100)

rgbmenub.grid(row=0, column=1, padx=10, pady=10)
thermalmenub.grid(row=0, column=2, padx=10, pady=10)

topRightFrame = tk.Frame(win, relief='solid', bd=2)
topRightFrame.grid(row=0, column=1, padx=10, sticky="e")

settImg = tk.PhotoImage(file="ex1.png")
settingb = tk.Button(topRightFrame, image=settImg, height=100, width=100)

infoImg = tk.PhotoImage(file="ex1.png")
infob = tk.Button(topRightFrame, image=infoImg, height=100, width=100)

loginImg = tk.PhotoImage(file="ex1.png")
loginb = tk.Button(topRightFrame, image=loginImg, height=100, width=100)

settingb.grid(row=0, column=0, padx=10, pady=10)
infob.grid(row=0, column=1, padx=10, pady=10)
loginb.grid(row=0, column=2,padx=10, pady=10)

exitImg = tk.PhotoImage(file="ex1.png")
exitb = tk.Button(topRightFrame, image=exitImg, command=quit, height=100, width=100).grid(row=0, column=3, padx=10, pady=10)

leftFrame = tk.Frame(win, relief='solid', bd=2)
leftFrame.grid(row=1, column=0, padx=10, pady=10, sticky="nw")
tk.Button(leftFrame, text="Example 1").grid(row=1, column=0, pady=5)
tk.Button(leftFrame, text="Example 2").grid(row=2, column=0, pady=5)
tk.Button(leftFrame, text="Example 3").grid(row=3, column=0, pady=5)

rightFrame = tk.Frame(win, relief='solid', bd=2)
rightFrame.grid(row=1, column=1, padx=10, pady=10, sticky="ne")

dema = tk.Button(rightFrame, text="DEMA Intranet")
dema.grid(row=0, column=0, pady=5)
tk.Button(rightFrame, text="Example 4").grid(row=1, column=0, pady=5)
tk.Button(rightFrame, text="Example 5").grid(row=2, column=0, pady=5)
tk.Button(rightFrame, text="Example 6").grid(row=3, column=0, pady=5)

win.mainloop()

PS У меня был только один значок 50x50 "home".