PySimpleGUI为JSON数组每项自动生成带复选框的Frame布局

核心原因 #

PySimpleGUI采用二维列表规则定义布局：

• 外层列表的每一个子元素对应界面上的一个水平行
• 每个行对应的子列表内的元素，是该行内横向排列的控件
  你当前的代码将所有Frame组成的一维列表直接与顶部搜索行放在同一层级，导致所有Frame被识别为第一行的并列控件，出现横向堆叠的错误效果。

修改代码 #

仅需要调整__item_selection_layout方法中layout_over_view的生成逻辑，将每个Frame单独作为一行加入布局即可，修改后完整代码如下：

def __create_checkbox_array(self, input_string):
    formated_array = []
    i = 0
    if len(input_string) != 0:
        for item in input_string:
            formated_array.append(  sg.Frame(f'Item Line : {i}', [[ sg.Checkbox(item, default = True, key= f"-item:{i}-") ]] )   )
            i += 1
    else:
        formated_array.append(sg.Text('No items found', key="-item:0-"))
    print(formated_array)
    return formated_array

def __item_selection_layout(self, item_list):
    # 先定义顶部搜索行
    layout_over_view =  [
        [
            sg.Text("Order Nummer"),
            sg.In(size=(20, 1), enable_events=True, key="-order-"),
            sg.Button("Zoeken", key="-search-"),
        ]
    ]
    # 获取所有生成的产品Frame
    item_frames = self.__create_checkbox_array(item_list)
    # 每个Frame单独作为一行加入布局，实现垂直排列
    for frame in item_frames:
        layout_over_view.append([frame])
    
    image_viewer_column = [
        [sg.Text("Choose an image from list on left:")],
        [sg.Text(size=(40, 1), key="-TOUT-")],
        [sg.Image(key="-IMAGE-")],
    ]
    layout = [
        [
            sg.Column(layout_over_view),
            sg.VSeperator(),
            sg.Column(image_viewer_column),
            sg.VSeperator(),
        ]
    ]
    return sg.Window("Image Viewer", layout)

补充说明 #

如果你想简化代码，也可以直接修改__create_checkbox_array方法，生成Frame时就将其包裹为单独行结构，之后直接用extend方法合并到布局列表即可，无需额外遍历。

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