求助：如何用PySimpleGUI实现带滚动的图文框架布局

核心实现思路 #

用可滚动Column作为容器，循环生成包含Image和Text的Frame，将这些Frame依次加入Column的布局列表，即可实现你要的滚动式内容排列效果。

完整示例代码 #

import PySimpleGUI as sg

# 模拟多组图片+文本数据，替换成你自己的内容
content_items = [
    {"img_path": "test1.png", "desc": "这是第一组内容的描述文本"},
    {"img_path": "test2.png", "desc": "第二组内容，文本可以更长一些，测试自动换行效果"},
    {"img_path": "test3.png", "desc": "第三组内容的简短说明"},
    # 可继续添加更多内容项
]

# 封装单个Frame的创建逻辑
def build_item_frame(img_path, text):
    # 加载图片，按需调整尺寸；如果是PIL处理后的图片，需转字节流传入
    img_elem = sg.Image(filename=img_path, size=(120, 120))
    # 设置wrap_length让文本自动换行
    text_elem = sg.Text(text, wrap_length=350, pad=(5, 10))
    
    # Frame内部布局：图片在上，文本在下，可根据需求改成横向排列
    frame_inner_layout = [
        [img_elem],
        [text_elem]
    ]
    return sg.Frame("", frame_inner_layout, pad=(15, 15), border_width=1)

# 构建可滚动Column的布局
scroll_col_layout = []
for item in content_items:
    scroll_col_layout.append([build_item_frame(item["img_path"], item["desc"])])

# 主窗口布局
main_layout = [
    [sg.Column(scroll_col_layout, scrollable=True, vertical_scroll_only=True, size=(500, 400))]
]

window = sg.Window("滚动式图片文本布局", main_layout, resizable=True)

while True:
    event, _ = window.read()
    if event == sg.WIN_CLOSED:
        break

window.close()

关键细节说明 #

• 滚动容器设置：sg.Column开启scrollable=True，vertical_scroll_only=True只显示垂直滚动条，尺寸可根据你的界面需求调整。
• 循环生成Frame：通过函数封装单个Frame的创建逻辑，遍历数据列表批量生成布局项，解决循环排列的问题。
• 图片适配：如果你的图片是PIL处理后的对象，可参考以下转换代码：

from PIL import Image
import io

def pil_to_sg_img(pil_img, size=(120,120)):
    resized_img = pil_img.resize(size)
    img_bytes = io.BytesIO()
    resized_img.save(img_bytes, format="PNG")
    return sg.Image(data=img_bytes.getvalue())

替换示例中img_elem的创建逻辑即可。

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