Как мне настроить макет интерфейса под другие разрешения экрана?

Содержание

Вопрос или проблема
Ответ или решение
1. Используйте относительные параметры
2. Измените ваш код
3. Заключение

Вопрос или проблема

Как сделать так, чтобы макет интерфейса в программе на других компьютерах с различным размером экрана (разрешением) был таким же, как на моем компьютере. Например: я запускаю программу на своем компьютере, и с интерфейсом все в порядке, но как только я запускаю ее на другом (меньшем или большем) компьютере, интерфейс отличается от моего. Как мне сделать так, чтобы интерфейс на других компьютерах был таким же, как мой?
import tkinter as tk

from PIL import Image, ImageTk


def open_second_window():
    second_window = tk.Toplevel(root)
    second_window.title("окно")
    second_window.state('zoomed')

    image_path = "1.jpg"
    image = Image.open(image_path)
    photo = ImageTk.PhotoImage(image)

    label = tk.Label(second_window, image=photo)
    label.image = photo 
    label.pack(fill=tk.BOTH, expand=True)
    label.place(x=770, y=0)

    button = tk.Button(second_window,height=4, width=12, font="Times 31", text="ОДИН", command=lambda: open_four_window(second_window))

    button.place(x=308, y=82, anchor="ne")
    button1 = tk.Button(second_window,height=4, width=12, font="Times 31", wraplength=289, text="ДВА", command=open_five_window)
    button1.place(x=688, y=82, anchor="ne")
    button = tk.Button(second_window,height=4, width=12, font="Times 31", text="ТРЕ", command=open_threee_window)
    button.place(x=308, y=352, anchor="ne")
    button1 = tk.Button(second_window,height=4, width=12, font="Times 31", text="ЧЕТЫРЕ", command=open_threetenfive_window)
    button1.place(x=688, y=352, anchor="ne")


    tk.Label(second_window, font="Times 30", text="текст", fg="red").place(x=150, y=30)


    third_window.grab_set()
def open_four_window(second_window):
    second_window.destroy()

    four_window = tk.Toplevel(root)
    four_window.title("окно")
    four_window.state('zoomed')

    image_path = "2.jpg"
    image = Image.open(image_path)
    photo = ImageTk.PhotoImage(image)

    label = tk.Label(four_window, image=photo)
    label.image = photo  
    label.pack(fill=tk.BOTH, expand=True)
    label.place(x=0, y=0)


    button = tk.Button(four_window,height=1, width=33, font="Times 31", text="Начать", command=lambda: open_second_window())
    button.place(x=768, y=720, anchor="ne")
    button1 = tk.Button(four_window,height=1, width=33, font="Times 31", text="Выход", command=Close)
    button1.place(x=1536, y=720, anchor="ne")



    third_window.grab_set()

///

root = tk.Tk()
root.title("меню")
root.state('zoomed')


image_path = "40.jpg"
image = Image.open(image_path)
photo = ImageTk.PhotoImage(image)
image.thumbnail((1, 1))

label = tk.Label(root, image=photo)
label.pack(fill=tk.BOTH, expand=True)
label.place(x=-3, y=0)

def Close(): 
    root.destroy() 

button = tk.Button(root,height=1, width=33, font="Times 31", text="Начать", command=lambda: open_second_window())
button.place(x=768, y=720, anchor="ne")
button1 = tk.Button(root,height=1, width=33, font="Times 31", text="Выход", command=Close)
button1.place(x=1536, y=720, anchor="ne")


tk.Label(root, font="Times 30", text="текст", fg="red").place(x=150, y=30)
tk.Label(root, font="Times 30 italic", text="описание").place(x=600, y=77)

root.mainloop()

Вы можете столкнуться с этой проблемой, потому что задали позиции x и y как фиксированные. Если вы хотите, чтобы размеры компонентов изменялись в зависимости от разрешения экрана, вы можете использовать функцию place с параметрами relwidth и relheight.
например.
button.place(relx=0.5, rely=0.9, relwidth=0.25, relheight=0.1, anchor=”ne”)

Ответ или решение

Для того чтобы ваша программа на Python с использованием библиотеки Tkinter имела одинаковый интерфейс на разных разрешениях экрана, вам необходимо использовать относительные размеры и позиции для размещения виджетов вместо их абсолютных координат (например, фиксированных значений для x и y).

1. Используйте относительные параметры

Вместо фиксированных значений x и y, вы можете воспользоваться параметрами relx, rely, relwidth и relheight, которые позволяют задавать размеры и позиции виджетов относительно родительского контейнера. Например:

button.place(relx=0.5, rely=0.9, relwidth=0.25, relheight=0.1, anchor='center')

Здесь:

relx и rely задают относительное положение (0.5 — это 50% ширины, 0.9 — 90% высоты родительского виджета).
relwidth и relheight задают относительные размеры кнопки (половина ширины родителя и 10% высоты).

2. Измените ваш код

Давайте применим эти изменения к вашему коду. Ниже представлено обновленное создание интерфейса:

import tkinter as tk
from PIL import Image, ImageTk

def open_second_window():
    second_window = tk.Toplevel(root)
    second_window.title("window")
    second_window.geometry("800x600")  # можно задать минимальный размер окна

    image_path = "1.jpg"
    image = Image.open(image_path)
    photo = ImageTk.PhotoImage(image)

    label = tk.Label(second_window, image=photo)
    label.image = photo
    label.pack(fill=tk.BOTH, expand=True)

    button = tk.Button(second_window, height=4, width=12, font="Times 31", text="ONE", command=lambda: open_four_window(second_window))
    button.place(relx=0.2, rely=0.1, relwidth=0.25, relheight=0.1)

    button1 = tk.Button(second_window, height=4, width=12, font="Times 31", text="TWO", command=open_five_window)
    button1.place(relx=0.6, rely=0.1, relwidth=0.25, relheight=0.1)

    button2 = tk.Button(second_window, height=4, width=12, font="Times 31", text="THREE", command=open_threee_window)
    button2.place(relx=0.2, rely=0.5, relwidth=0.25, relheight=0.1)

    button3 = tk.Button(second_window, height=4, width=12, font="Times 31", text="FOUR", command=open_threetenfive_window)
    button3.place(relx=0.6, rely=0.5, relwidth=0.25, relheight=0.1)

    tk.Label(second_window, font="Times 30", text="text", fg="red").place(relx=0.1, rely=0.05)

def open_four_window(second_window):
    second_window.destroy()
    four_window = tk.Toplevel(root)
    four_window.title("win")
    four_window.geometry("800x600")

    image_path = "2.jpg"
    image = Image.open(image_path)
    photo = ImageTk.PhotoImage(image)

    label = tk.Label(four_window, image=photo)
    label.image = photo
    label.pack(fill=tk.BOTH, expand=True)

    button = tk.Button(four_window, height=1, width=33, font="Times 31", text="Start", command=lambda: open_second_window())
    button.place(relx=0.5, rely=0.9, relwidth=0.25, relheight=0.1)

    button1 = tk.Button(four_window, height=1, width=33, font="Times 31", text="Exit", command=Close)
    button1.place(relx=0.8, rely=0.9, relwidth=0.25, relheight=0.1)

def Close():
    root.destroy()

root = tk.Tk()
root.title("menu")
root.geometry("800x600")

image_path = "40.jpg"
image = Image.open(image_path)
photo = ImageTk.PhotoImage(image)

label = tk.Label(root, image=photo)
label.pack(fill=tk.BOTH, expand=True)

button = tk.Button(root, height=1, width=33, font="Times 31", text="Start", command=lambda: open_second_window())
button.place(relx=0.5, rely=0.9, relwidth=0.25, relheight=0.1)

button1 = tk.Button(root, height=1, width=33, font="Times 31", text="Exit", command=Close)
button1.place(relx=0.8, rely=0.9, relwidth=0.25, relheight=0.1)

tk.Label(root, font="Times 30", text="text", fg="red").place(relx=0.1, rely=0.05)
tk.Label(root, font="Times 30 italic", text="description").place(relx=0.3, rely=0.1)

root.mainloop()

3. Заключение

Используя относительные позиции и размеры, ваше приложение будет гораздо лучше адаптироваться к различным разрешениям экранов. Это обеспечит более согласованный и удобный интерфейс для пользователей, независимо от того, на каком устройстве они запускают ваше приложение.