Pygame渲染时文字显示在Rect对象下方被遮挡如何解决

• 开发场景：基于Pygame开发数独类网格界面
• 异常现象：出现渲染层级错乱，部分文字被Rect对象遮挡
• 预期效果：文字始终显示在Rect上层
• 补充说明：当前代码中红色Rect为调试用，正式场景下Rect为白色，自行排查未定位到根因
• 运行效果截图：
  

网格与Rect绘制代码 #

def draw(self, height, width):
    self._screen.fill((255,255,255))

    square_size = self.SCREEN_SIZE/9
    # 绘制网格线
    for i in range(self.rows+1):
        thick = 4 if i % 3 == 0 else 1
        offset = i * square_size
        pygame.draw.line(self._screen, self.BLACK, (0, offset), (width, offset), width=thick)
        pygame.draw.line(self._screen, self.BLACK, (offset, 0), (offset, height), width=thick)

    for i in range(self.rows):
        for j in range(self.cols):
            self._board.init_square(motherboard[i][j], i, j)
            pygame.draw.rect(self._screen, (250,0,0), (i*square_size+3, j*square_size+3, square_size-4, square_size-4))
            
            # if self._board.board[i][j].value != 0:
            self.display_numbers(self._board.board[i][j].value, ((j*square_size), (i*square_size)+20))

文字渲染函数代码 #

def display_numbers(self, value, position):
    f_img = self._font.render(str(value), True, (0, 0, 0))
    self._screen.blit(f_img, position)

根因 #

Pygame没有独立的层级配置接口，渲染覆盖规则完全由绘制调用顺序决定：后执行的绘制操作，会覆盖同位置之前绘制的内容。
代码中Rect绘制的x、y坐标把行索引i和列索引j写反了：

• 文字渲染时，x坐标用列索引j*square_size、y坐标用行索引i*square_size，坐标逻辑是正确的
• 但Rect绘制时，x坐标误用了行索引i*square_size、y坐标误用了列索引j*square_size，导致Rect绘制位置整体错位
  双层循环执行时，先在正确位置绘制的数字，会被后续循环步骤中错位绘制到该位置的Rect覆盖，最终出现文字被遮挡的现象。

修复步骤 #

1. 修正Rect的绘制坐标，把x、y参数的i、j顺序调换，和文字坐标逻辑对齐，修改后的Rect绘制代码如下：

   pygame.draw.rect(self._screen, (250,0,0), (j*square_size+3, i*square_size+3, square_size-4, square_size-4))
   

2. 把self._board.init_square(motherboard[i][j], i, j)这句初始化逻辑从绘制循环中移除，放到棋盘初始化的流程里执行，不需要每帧绘制时重复调用，减少无意义的性能消耗。
3. （可选优化）可以把所有Rect绘制完成后，单独开一个循环统一渲染所有数字，逻辑上彻底把背景层（网格、Rect）和前景层（文字）分开，后续维护时不容易出现层级错乱问题。

内容的提问来源于stack exchange，提问作者arshia mohammadi