如何在Python Tkinter中实现可点击变色的响应式网格？

原代码问题说明 #

原代码存在两个核心问题：

• 循环内重复生成color_grid，导致格子颜色被多次随机覆盖，且无法后续追踪修改
• 未保存矩形ID、未绑定点击事件，无法实现点击变色的交互逻辑

完整解决代码 #

import tkinter as tk
import random

GRID_SIZE = 5  # 可自定义网格行列数
SQUARE_SIZE = 50  # 可自定义单个格子的尺寸
COLORS = ["green", "yellow"]

def draw_board(canvas):
    # 全局变量存储颜色网格和矩形ID，用于后续修改
    global color_grid, rect_ids
    color_grid = [[random.choice(COLORS) for _ in range(GRID_SIZE)] for _ in range(GRID_SIZE)]
    rect_ids = []
    for i in range(GRID_SIZE):
        row_ids = []
        for j in range(GRID_SIZE):
            x0, y0 = i * SQUARE_SIZE, j * SQUARE_SIZE
            x1, y1 = x0 + SQUARE_SIZE, y0 + SQUARE_SIZE
            # 创建矩形并保存其ID
            rect_id = canvas.create_rectangle(x0, y0, x1, y1, fill=color_grid[i][j])
            row_ids.append(rect_id)
        rect_ids.append(row_ids)

def on_grid_click(event):
    # 通过点击坐标计算对应的网格位置
    i = event.x // SQUARE_SIZE
    j = event.y // SQUARE_SIZE
    # 校验坐标是否在网格范围内
    if 0 <= i < GRID_SIZE and 0 <= j < GRID_SIZE:
        # 切换当前格子的颜色
        current_color = color_grid[i][j]
        new_color = COLORS[1] if current_color == COLORS[0] else COLORS[0]
        color_grid[i][j] = new_color
        # 更新矩形的填充色
        canvas.itemconfig(rect_ids[i][j], fill=new_color)

if __name__ == "__main__":
    root = tk.Tk()
    root.title("点击变色网格")
    canvas = tk.Canvas(root, width=GRID_SIZE*SQUARE_SIZE, height=GRID_SIZE*SQUARE_SIZE)
    canvas.pack()
    draw_board(canvas)
    # 绑定鼠标左键点击事件
    canvas.bind("<Button-1>", on_grid_click)
    root.mainloop()

关键改进点 #

• 初始化时一次性生成color_grid，避免重复随机操作
• 用rect_ids列表保存每个矩形的ID，方便后续定位修改
• 新增点击事件处理函数，通过坐标计算定位网格，切换颜色后调用itemconfig更新矩形样式

内容的提问来源于stack exchange，提问作者Harsh Darji