PySimpleGUI中实现Graph矩形背景及按钮叠加显示

需要通过PySimpleGUI的Graph组件结合draw_rectangle方法制作背景，让所有按钮叠加在Graph上方，仅用矩形优化GUI视觉效果。当前代码将Graph置于布局底部，尝试绘制距窗口各边100像素的矩形时出现向下偏移，咨询如何将该矩形设置为窗口背景。

要让Graph作为背景并正确绘制矩形，核心是调整Graph在布局中的层级和尺寸适配，具体步骤如下：

• 将Graph移至布局最顶部：PySimpleGUI的布局渲染顺序为「先添加的元素在底层，后添加的在上层」，把Graph放在布局第一个位置，才能让后续的按钮、文本等元素叠加在它上方。
• 设置Graph铺满窗口：给Graph添加expand_x=True和expand_y=True参数，确保它自动适配窗口尺寸，不受其他布局元素的挤压偏移。
• 修正矩形绘制坐标：基于Graph的坐标系统（左下角为(0,0)，右上角为窗口尺寸），距四边100像素的矩形坐标应为(100, 100)到(窗口宽度-100, 窗口高度-100)。

# admin_screen.py
import PySimpleGUI as sg
from state import State

class ADMIN_SCREEN:
    def __init__(self):
        # 把Graph放在布局最顶部，作为背景层
        layout = [
            [sg.Graph(canvas_size=(1024, 600), graph_bottom_left=(0, 0), graph_top_right=(1024, 600),
                      background_color='#0032A0', key='GRAPH', expand_x=True, expand_y=True)],
            [sg.Sizer(350, 0), sg.Text('Enter Quantity to Edit Count', size=(25, 1), font=('Helvetica', 18), justification='center')],
            [sg.Button('Screw: M3 x 16', size=(12, 4), key='-SCREW16-'), sg.Sizer(371, 0),  sg.Input(size=(10, 1), justification='center', key='input')],
            [sg.Button('Screw: M3 x 30', size=(12, 4), key='-SCREW30-'), sg.Sizer(290, 0),sg.Button('1', size=(8, 4)),sg.Button('2', size=(8, 4)), sg.Button('3', size=(8, 4))],
            [sg.Button('Screw: M3 x 50', size=(12, 4), key='-SCREW50-'), sg.Sizer(100, 0), sg.Button('+', size=(8, 4)), sg.Sizer(107, 0),sg.Button('4', size=(8, 4)), sg.Button('5', size=(8, 4)), sg.Button('6', size=(8, 4))],
            [sg.Button('Nut: M3', size=(12, 4), key='-NUT-'), sg.Sizer(100, 0), sg.Button('-', size=(8, 4)), sg.Sizer(107, 0),sg.Button('7', size=(8, 4)), sg.Button('8', size=(8, 4)), sg.Button('9', size=(8, 4))],
            [sg.Button('Locknut: M3', size=(12, 4), key='-LOCKNUT-'), sg.Sizer(290, 0),sg.Button('Submit', size=(8, 4)), sg.Button('0', size=(8, 4)), sg.Button('Clear', size=(8, 4))],
            [sg.Button('Washer: M3', size=(12, 4),  key='-WASHER-'), sg.Sizer(372, 0),sg.Button('Exit', size=(8, 4))],
            [sg.Sizer(413, 0),sg.Text(size=(15, 1), font=('Helvetica', 18), text_color='white', key='out', justification='center')],
        ]

        # 创建窗口
        self.window = sg.Window('', layout, background_color='#0032A0', size=(1024, 600))

        # 完成窗口初始化
        self.window.finalize()

        # 绘制距四边100像素的背景矩形
        graph = self.window['GRAPH']
        # 计算矩形坐标：左下角(100,100)，右上角(1024-100, 600-100)
        graph.draw_rectangle((100, 100), (924, 500), fill_color='#002080', line_color='white')

        # 事件循环
        keys_entered = ''
        while True:
            event, values = self.window.read()
            if event == sg.WIN_CLOSED:
                break
            if event == 'Clear':
                keys_entered = ''
            elif event in '1234567890':
                keys_entered = values['input']
                keys_entered += event
            elif event == 'Submit':
                keys_entered = values['input']
                self.window['out'].update(keys_entered)
            elif event == 'Exit':
                return State.HOME_SCREEN

            self.window['input'].update(keys_entered)

1. Graph位置调整：将Graph组件移到布局的第一行，确保它作为底层背景。
2. 添加适配参数：给Graph增加expand_x=True和expand_y=True，让它自动铺满整个窗口，避免被其他元素挤压偏移。
3. 绘制矩形：在窗口finalize后，调用draw_rectangle绘制目标矩形，坐标计算准确对应窗口四边内缩100像素的区域。

内容的提问来源于stack exchange，提问作者Taylor Fettig