PySimpleGUI 对齐不同列上的行

Question

作为 python 和 python GUI 的新手，我开始使用 PySimpleGUI。
所以我得到了一个带有图像属性的数据库（来自 OCR），我想制作一种图片库，在每个图像旁边显示图像属性列表，并允许更新属性。（打印件中的文字将变成文本框供输入）。 属性列表应与其图像垂直居中。

我得到了：

我想要这样的东西：

我一直在尝试使用不同的容器（这就是我在那里设置框架的原因）、它们的 'vertical_alignment' 和 'size' 属性。但到目前为止运气不好。

最后，我会做一个带有分页的列表或网格来加载所有图像，但这是 structure/module 的基础。

这是我的代码：

import PySimpleGUI as sg
from PIL import Image, ImageTk
import io

def get_img_data(f, first=False):
    """Generate image data using PIL
    """
    img = Image.open(f)
    img = img.resize((200,300), Image.ANTIALIAS)
    if first:                     # tkinter is inactive the first time
        bio = io.BytesIO()
        img.save(bio, format="PNG")
        del img
        return bio.getvalue()
    return ImageTk.PhotoImage(img)

#load images into elements
image_elem1 = sg.Image(data=get_img_data('img_edit/img_1.jpg', first=True))
image_elem2 = sg.Image(data=get_img_data('img_edit/img_2.jpg', first=True))

#img 1 attributes list
col_21 =[
        [sg.Text('Image   1   attribute    item    '), sg.Button(button_text="Update") ],
        [sg.Text('Image   1   attribute    item    '), sg.Button(button_text="Update") ],
        [sg.Text('Image   1   attribute    item    '), sg.Button(button_text="Update") ]]

#img 2 attributes list
col_22 =[
        [sg.Text('Image   2   attribute    item    '), sg.Button(button_text="Update") ],
        [sg.Text('Image   2   attribute    item    '), sg.Button(button_text="Update") ],
        [sg.Text('Image   2   attribute    item    '), sg.Button(button_text="Update") ]]

#images column
col_1 = [
        [image_elem1],
        [image_elem2]
        ]

#attributes column
col_2 = [
        [sg.Frame(layout=[[sg.Column(col_21, vertical_alignment = 'c')]], vertical_alignment = 'c',title='')],
        [sg.Frame(layout=[[sg.Column(col_22, vertical_alignment = 'c')]], vertical_alignment = 'c',title='')]]

layout = [[sg.Column(col_1), sg.Column(col_2)]]
# Create the Window
window = sg.Window('Window Title', layout, resizable=True)
# Event Loop to process "events" and get the "values" of the inputs
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break
window.close()

Answer 1

您应该逐行布局，而不是逐列布局：

#load images into elements
image_elem1 = sg.Image(data=get_img_data('img_edit/img_1.jpg', first=True))
image_elem2 = sg.Image(data=get_img_data('img_edit/img_2.jpg', first=True))

#img 1 attributes list
col_21 =[
        [sg.Text('Image   1   attribute    item    '), sg.Button(button_text="Update") ],
        [sg.Text('Image   1   attribute    item    '), sg.Button(button_text="Update") ],
        [sg.Text('Image   1   attribute    item    '), sg.Button(button_text="Update") ]]

#img 2 attributes list
col_22 =[
        [sg.Text('Image   2   attribute    item    '), sg.Button(button_text="Update") ],
        [sg.Text('Image   2   attribute    item    '), sg.Button(button_text="Update") ],
        [sg.Text('Image   2   attribute    item    '), sg.Button(button_text="Update") ]]

layout = [[image_elem1, sg.Frame(layout=col_21, title='')],
          [image_elem2, sg.Frame(layout=col_22, title='')]]

PySimpleGUI 对齐不同列上的行

PySimpleGUI align rows on different columns

python

tkinter

pysimplegui