Глава 17 · Интерфейс игры

Адаптивное игровое поле

Игра не должна разваливаться при изменении размера окна — grid() и weight решают это так же, как в главе 16.

Поле не должно превращаться в хрупкую конструкцию из виджетов с фиксированным размером

adaptivnoe_pole.py

# outer — родительский контейнер (build_ui); строка 1 — это строка поля
outer.rowconfigure(1, weight=1)

board_frame = ttk.Frame(outer)
board_frame.grid(row=1, column=0, columnspan=3, sticky="nsew")
for i in range(3):
    board_frame.rowconfigure(i, weight=1)
    board_frame.columnconfigure(i, weight=1)

for index in range(9):
    btn = tk.Button(board_frame, text="", font=("Arial", 28, "bold"), width=3, height=1)
    btn.grid(row=index // 3, column=index % 3, sticky="nsew", padx=3, pady=3)

sticky='nsew' + weight — на КАЖДОМ уровне вложенности

Те же приёмы адаптивного grid(), что и в разделе 16.15 — но их нужно применить на обоих уровнях сразу. Внутри board_frame уже недостаточно дать вес строкам/столбцам, если сам board_frame не растягивается в своей ячейке outer: нужны И outer.rowconfigure(1, weight=1) на родителе, И sticky="nsew" на самом board_frame.grid(). Пропустить любое из двух — и поле перестанет расти вместе с окном по вертикали.

Не обещаем идеально квадратные клетки на любой платформе

width=3, height=1 у tk.Button задаёт размер в текстовых единицах (символах/строках шрифта), а не в пикселях — точное соотношение сторон зависит от шрифта и темы конкретной ОС. Мы делаем поле адаптивным и опрятным — не гарантируем математически точный квадрат на всех платформах одновременно.

Видно на реальном окне, а не только в коде

Слева — обычный размер окна, справа — то же окно после увеличения: то же состояние партии, но клетки заметно крупнее — Одно и то же приложение и одно и то же состояние партии. Слева — исходный размер окна, справа — то же окно после увеличения. Клетки получают дополнительное пространство благодаря weight и sticky="nsew".

Практика: адаптивное поле при изменении размера окна

Модуль tkinter открывает нативное окно Python — выполните локально в VS Code, PyCharm или Jupyter

Практика выполняется локально

Открыть практику →

← Назад

Архитектура TicTacToeApp

Визуальный стиль X/O