Tkinter中如何让Canvas上的控件随窗口缩放保持相对位置？

嘿，作为Tkinter新手遇到这种适配不同显示器的布局问题太正常了！我给你整理了一套完整的解决方案，既能实现全屏背景图，又能让输入框和按钮始终保持相对位置，不管窗口比例怎么变都没问题。

核心思路 #

咱们的核心是用Canvas承载背景图，然后把输入框、按钮通过create_window嵌入Canvas中，再绑定窗口大小变化事件，每次窗口尺寸改变时，按相对比例重新计算控件位置和背景图尺寸，这样就能适配任何显示器比例啦。

完整代码示例 #

先上可直接运行的代码，我加了详细注释，你可以跟着改：

import tkinter as tk
from PIL import Image, ImageTk  # 需要先装Pillow：pip install pillow

class FullscreenGUI:
    def __init__(self, root):
        self.root = root
        # 开启全屏模式
        self.root.attributes('-fullscreen', True)
        # 绑定窗口大小变化事件（窗口缩放时自动触发）
        self.root.bind('<Configure>', self.update_layout)
        # 绑定Esc键退出全屏（方便调试）
        self.root.bind('<Escape>', lambda _: self.root.destroy())

        # 创建铺满窗口的Canvas
        self.canvas = tk.Canvas(root)
        self.canvas.pack(fill=tk.BOTH, expand=True)

        # 加载背景图片（替换成你的图片路径！）
        self.bg_original = Image.open("your_background.jpg")
        self.bg_tk = None  # 用来存Tkinter格式的缩放后图片

        # 创建输入框和按钮
        self.input_entry = tk.Entry(root, font=('微软雅黑', 16))
        self.submit_btn = tk.Button(root, text="确认", font=('微软雅黑', 16), command=self.print_input)

        # 初始化布局
        self.update_layout(None)

    def update_layout(self, event):
        # 获取当前窗口的宽高
        win_w = self.root.winfo_width()
        win_h = self.root.winfo_height()

        # --- 更新背景图：保持图片比例居中显示 ---
        bg_w, bg_h = self.bg_original.size
        # 计算缩放比例（取宽、高中较小的那个比例，避免图片变形）
        scale_ratio = min(win_w / bg_w, win_h / bg_h)
        new_bg_w = int(bg_w * scale_ratio)
        new_bg_h = int(bg_h * scale_ratio)
        # 高质量缩放图片
        resized_bg = self.bg_original.resize((new_bg_w, new_bg_h), Image.Resampling.LANCZOS)
        self.bg_tk = ImageTk.PhotoImage(resized_bg)

        # 清除旧背景，绘制新背景到Canvas中心
        self.canvas.delete("background")
        self.canvas.create_image(win_w//2, win_h//2, image=self.bg_tk, tag="background")

        # --- 更新输入框位置：相对窗口的25%宽度、50%高度 ---
        entry_x = win_w * 0.25
        entry_y = win_h * 0.5
        # 先删除旧的输入框控件，再重新创建（避免重叠）
        self.canvas.delete("input_entry")
        self.canvas.create_window(entry_x, entry_y, window=self.input_entry, tag="input_entry", width=250)

        # --- 更新按钮位置：输入框右侧30px，同一高度 ---
        btn_x = entry_x + 280  # 250（输入框宽度）+30（间距）
        btn_y = entry_y
        self.canvas.delete("submit_btn")
        self.canvas.create_window(btn_x, btn_y, window=self.submit_btn, tag="submit_btn")

    def print_input(self):
        # 按钮点击事件示例：打印输入内容
        print(f"你输入了：{self.input_entry.get()}")

if __name__ == "__main__":
    root = tk.Tk()
    app = FullscreenGUI(root)
    root.mainloop()

关键细节说明 #

1. 全屏模式：用root.attributes('-fullscreen', True)开启全屏，同时绑定Esc键方便退出调试。
2. 背景图适配：用Pillow的高质量缩放，保持图片比例居中，避免拉伸变形；如果不需要保持比例，直接把new_bg_w和new_bg_h设为窗口宽高即可。
3. 控件相对位置：用窗口宽高的比例值（比如win_w * 0.25）计算位置，不管窗口是16:9宽屏还是4:3旧显示器，控件都会保持相对窗口的位置不变。
4. 动态更新：<Configure>事件会在窗口大小变化时触发，每次都重新绘制背景和控件，保证布局始终正确。

注意事项 #

• 记得安装Pillow库：pip install pillow
• 替换代码中的背景图片路径为你自己的图片路径
• 可以调整比例值（比如0.25改成0.3）、输入框宽度、按钮间距来适配你的需求

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