Tkinter可滚动网格中Canvas显示图片被截断的原因排查

我开发了一个简单的Python GUI程序，功能是从文件夹加载图片并在可滚动网格中展示。目前遇到的问题是图片会在某处被截断：图片实际存在（可通过方向键选中）但不可见，拖动滚动条时，可见区域会在某行中间被截断，剩余网格内容被隐藏。滚动条仍有大量可滚动空间，但滚动到底部时无内容显示。

程序代码如下：

import tkinter as tk
from PIL import ImageTk, Image
import os

# Function to load and resize the images
def load_and_resize_images(folder_path, size):
    images = []
    for filename in os.listdir(folder_path):
        if filename.endswith(".jpg") or filename.endswith(".png"):
            image_path = os.path.join(folder_path, filename)
            image = Image.open(image_path)
            image = image.resize(size, Image.ANTIALIAS)
            images.append(image)
    return images

# Create the main window
window = tk.Tk()
window.title("Scrollable Image Grid")
window.geometry("600x400")  # Adjust the window size as needed

# Set the folder path and image size
folder_path = "output"  # Change this to the path of your "output" folder
image_size = (100, 100)  # Change this to the desired image size

# Load and resize the images
images = load_and_resize_images(folder_path, image_size)

# Create a canvas to display the image grid
canvas = tk.Canvas(window)
canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

# Create a scrollbar for the canvas
scrollbar = tk.Scrollbar(window, command=canvas.yview)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

# Configure the canvas to use the scrollbar
canvas.configure(yscrollcommand=scrollbar.set)
canvas.bind("<Configure>", lambda e: canvas.configure(scrollregion=canvas.bbox("all")))

# Create a frame inside the canvas to hold the image grid
frame = tk.Frame(canvas)
canvas.create_window((0, 0), window=frame, anchor=tk.NW)

# Function to display the image grid
def display_image_grid():
    row = 0
    col = 0
    for image in images:
        img = ImageTk.PhotoImage(image)
        label = tk.Label(frame, image=img)
        label.image = img  # Keep a reference to prevent garbage collection
        label.grid(row=row, column=col, padx=5, pady=5)
        col += 1
        if col == 5:
            col = 0
            row += 1

# Call the function to display the image grid
display_image_grid()

# Configure the canvas scrolling
canvas.update_idletasks()
canvas.configure(scrollregion=canvas.bbox("all"))

# Start the GUI event loop
window.mainloop()

核心问题是画布的滚动区域没有正确跟随内部frame的尺寸变化。原代码只监听了画布自身的尺寸更新，但frame因添加图片网格而扩大时，滚动区域没有同步更新，导致部分内容被截断。

修改步骤 #

1. 移除手动更新滚动区域的冗余代码，改用事件监听动态同步
2. 将滚动区域的更新逻辑绑定到内部frame的<Configure>事件，确保frame尺寸变化时立即更新画布滚动范围
3. 替换Pillow中过时的ANTIALIAS方法，避免版本警告

修改后的完整代码 #

import tkinter as tk
from PIL import ImageTk, Image
import os

def load_and_resize_images(folder_path, size):
    images = []
    for filename in os.listdir(folder_path):
        if filename.endswith((".jpg", ".png")):
            image_path = os.path.join(folder_path, filename)
            with Image.open(image_path) as img:
                # 替换过时的ANTIALIAS为LANCZOS（Pillow 9.1.0+适用）
                resized_img = img.resize(size, Image.Resampling.LANCZOS)
                images.append(resized_img)
    return images

window = tk.Tk()
window.title("Scrollable Image Grid")
window.geometry("600x400")

folder_path = "output"
image_size = (100, 100)
images = load_and_resize_images(folder_path, image_size)

canvas = tk.Canvas(window)
canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

scrollbar = tk.Scrollbar(window, command=canvas.yview)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)

canvas.configure(yscrollcommand=scrollbar.set)

# 创建内部frame并添加到画布
frame = tk.Frame(canvas)
canvas.create_window((0, 0), window=frame, anchor=tk.NW)

# 监听frame尺寸变化，实时更新画布滚动区域
def update_scrollregion(event):
    canvas.configure(scrollregion=canvas.bbox("all"))
frame.bind("<Configure>", update_scrollregion)

def display_image_grid():
    row = 0
    col = 0
    for image in images:
        img = ImageTk.PhotoImage(image)
        label = tk.Label(frame, image=img)
        label.image = img  # 保留引用防止垃圾回收
        label.grid(row=row, column=col, padx=5, pady=5)
        col += 1
        if col == 5:
            col = 0
            row += 1

display_image_grid()

window.mainloop()

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